首先来看看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,废话不多说，

页面加载来一句：

 OK,现在就是用法，1a=7.5px，10a=1rem //=========更粗暴的写法。。。======================================================================================================================

     //=========================================================================================================== FastClick 的一句话用法：

$(function() {

FastClick.attach(document.body);

});