响应式断点应该要设在哪里

作页面时咱们经常遇到一个问题，作响应式布局时断点应该设在哪里？难道要对着各类设备尺寸一个一个地调？这得调到猴年马月。

固然，咱们能想到这个问题，各大框架也会考虑到这点，并且只会得考虑得更周到。这时候咱们只须要打开一些作得比较好的前端框架，查看下它关于响应式的源代码就能够找到咱们想要的答案。

而我参考的框架是uikit（http://www.getuikit.net）：

一、手机纵向：小于 479px

二、手机横向：480px 到 767px

三、平板电脑纵向：768px 到 959px

四、台式机或平板电脑横向：960px 到 1199px

五、大屏幕设备：1200px 或以上

说了这么多，必定有人要问我代码怎么写,下面我就列一些我经常使用的用法：

一、从大屏样式开始写到小屏(在@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) {}

二、从小屏样式开始写到大屏。代码以下：

@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) {}

三、若是只想改变一个范围下的尺寸能够这样写（注意：max-width和min-width都是包括当前值的）固然你也是能够继续添加其余范围。代码以下：

@media  screen  and (max-width: 767px)

　　　　　　　　　and (min-width: 480px){}

四、若是只想改变一个宽度下的样式，能够直接定义他的width值。代码以下：

若是使用的less或sass，还能够先定义一个变量来储存宽度，而后用@media直接引用变量就好啦，当需求改变的时候就只用改变一个变量就好啦