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