做页面时我们常常遇到一个问题，做响应式布局时断点应该设在哪里？难道要对着各种设备尺寸一个一个地调？这得调到猴年马月。
当然，我们能想到这个问题，各大框架也会考虑到这点，而且只会得考虑得更周到。这时候我们只需要打开一些做得比较好的前端框架，查看下它关于响应式的源代码就可以找到我们想要的答案。
而我参考的框架是uikit（http://www.getuikit.net）：
1、手机纵向：小于 479px
2、手机横向：480px 到 767px
3、平板电脑纵向：768px 到 959px
4、台式机或平板电脑横向：960px 到 1199px
5、大屏幕设备：1200px 或以上
说了这么多，一定有人要问我代码怎么写,下面我就列一些我常用的用法：
1、从大屏样式开始写到小屏(在@media下的优先级比较高)
@media screen and (max-width: 1200px) {}//在大于1200px这个屏宽下下应用
@media screen and (max-width: 960px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}
2、从小屏样式开始写到大屏
@media screen and (min-width: 480px) {}//在小于48px这个屏宽下下应用
@media screen and (min-width: 768px) {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 1200px) {}
3、如果只想改变一个范围下的尺寸可以这样写（注意：max-width和min-width都是包括当前值的）
@media screen and (max-width: 767px)
and (min-width: 480px){}
如果使用的less，还可以先定义一个变量来储存宽度，然后用@media直接引用变量就好啦，到时候改变需求的时候就只用改变一个变量就好啦
原文：http://www.cnblogs.com/miaozhu/p/5679999.html