关于响应式断点的一些看法

响应式设计

一、断点设置的目的

关于响应式断点的设置，一开始我们要明确我们的目的：
1. 考虑所有设备的分辨率，保证任何分辨率都能够有良好的体验
2. 考虑主流屏幕分辨率的大小，确保这几种分辨率下与设计稿有着良好的重合性，其它分辨率下没有出现明显的错位和排版错位就可以了。
第2个目的其实是第1个目的的子集，第1个目的对于应对未来分辨率的变化具有很强的适应性，但同时伴随着是多次细心繁琐地调整细节与对齐，工作量会大大增加。

二、主流分辨率

根据百度流量研究院的统计近期6个月分辨率使用情况，

现在工作室的断点设置情况如下

工作室断点设置                bootstrap4.0断点设置
2k                             1380px
1920px                         992px
1200px                         768px
960px                          544px
768px
450px

三、设计稿

对于响应式设计稿，由于设置了很多断点，所以我们需要做出多少份设计稿，我们不可能把所有分辨率的设计稿都绘制出来。以工作室为例，设计稿可分为:

>1200px  以1200px为主体的1960px稿
>960px   以960px为主体的1200px稿
>768px   以768px为主体的960px稿
>450px   以450px为主体的768px稿

四、两种设计观点

现在有两种设计观点，移动优先和优雅降级。
两种观点主要由于面向的主流对象的不同，优雅降级主要是面向pc端为主流。现在工作室采用的就是优雅降级。
移动优先是从移动端开始，然后再逐渐向桌面端适应。