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

Posted 2020-10-06 千机楼

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

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

而我参考的框架是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){}

4、如果只想改变一个宽度下的样式，可以直接定义他的width值。代码如下：

如果使用的less或sass，还可以先定义一个变量来储存宽度，然后用@media直接引用变量就好啦，当需求改变的时候就只用改变一个变量就好啦