玩媒体查询，就是这么简单粗暴！

首先来看看Bootstrap当时制定的标准，当然也是Twitter的意思咯：

 @media (max-width: 768px) {     body {         background-color: yellow;     } }

小屏幕（平板，大于等于 768px）

@media (min-width: 768px) {     body {         background-color: pink;     } }

中等屏幕（桌面显示器，大于等于 992px）

@media (min-width: 992px) {     body {         background-color: blue;     } }

大屏幕（大桌面显示器，大于等于 1200px）

@media (min-width: 1200px) {     body {         background-color: green;     } }

放到你的html中试一试！

下面是“严格模式”：

@media (max-width: 768px) {     body {         background-color: yellow;     } }

@media (min-width: 768px) and (max-width:992px) {     body {         background-color: pink;     } }

@media (min-width: 992px) and (max-width:1200px) {     body {         background-color: blue;     } }

@media (min-width: 1200px) {     body {         background-color: green;     } }

移动端的页面写的不少了就想来个模板，简单粗暴的解决问题，用750px的UI设计图,分25份。

@media only screen and (width: 320px) {
    html {
       font-size: 12.8px;
    }
}

@media only screen and (width: 360px) {
    html {
       font-size: 14.4px;
    }
}

@media only screen and (width: 375px) {
    html {
       font-size: 15px;
    }
}

@media only screen and (width: 400px) {
     html {
        font-size: 16px;
    }
}

@media only screen and (width: 412px) {
     html {
         font-size: 16.48px;
   }
}

@media only screen and (width: 414px) {
     html {
        font-size: 16.56px;
   }
}

@media only screen and (width: 568px) {
     html {
        font-size: 22.72px;
   }
}

@media only screen and (min-width: 640px) {
     html {
        font-size: 25.6px;
   }
}

@media only screen and (min-width: 667px) {
     html {
        font-size: 26.68px;
   }
}

@media only screen and (min-width: 732px) {
     html {
       font-size: 29.28px;
  }
}

@media only screen and (width: 768px) {
     html {
       font-size: 30.72px;
  }
}

@media only screen and (width: 1024px) {
    html {
      font-size: 40.96px;
  }
}

//=======直接到ipad,啊哈哈哈，犀利吧================================================================

再来一个更炫酷的，淘宝的flexible,废话不多说，

页面加载来一句：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
OK,现在就是用法，1a=7.5px，10a=1rem
//=========更粗暴的写法。。。======================================================================================================================

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

<!--设置IE渲染方式默认为最高-->

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- <link rel="stylesheet" href="css/normalize.css"> -->
<link href="./css/login_mobile.less" rel="stylesheet/less" type="text/css">

<script src="js/less.js"></script>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

<!--因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果： -->

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
//===========================================================================================================
FastClick 的一句话用法：

$(function() {
FastClick.attach(document.body);
});