移动端

设置meta viewport属性

<meta name="viewport" content="width=device-width,initial-scale=1">

引入不同尺寸设备的样式表

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->

使用css Media Queries方法

@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}
@media screen and (max-width: 480px) {
}

JS控制导航栏在resize事件触发后的可见性

$(w).resize(function(){ //Update dimensions on resize
  sw = document.documentElement.clientWidth;
  sh = document.documentElement.clientHeight;
  checkMobile();
});
//Check if Mobile
function checkMobile() {
  mobile = (sw > breakpoint) ? false : true;
  if (!mobile) { //If Not Mobile
    $('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
  } else { //Hide 
    if(!$('#nav-anchors a').hasClass('active')) {
      $('#nav,#search').hide(); //Hide full navigation and search
    }
  }
}

响应式解决方案

弹性图片

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

自适应嵌入媒体

.video embed, .video object, .video iframe {
  width: 100%;
  height: auto;
}

禁用ipone字体自适应功能

html {
  -webkit-text-size-adjust: none;
}

让IE9以下的IE版本支持响应式

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->