下手响应式及断点设置分析

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载

首先，本文是普通入门知识篇，主要说的是断点的设置。

很多想接触响应式的同学都会有以下疑惑：

• 为什么要做响应式？
• 怎么入门响应式，是不是很难？
• 分辨率那么多，响应式断点怎么设置？

所以本文简单说下下手响应式的一些基础，包你入门响应式，没学会的话再手把手教。

为什么要学响应式

这个问题呢就跟女神有多面一样，比喻在家是睡衣，上班是职业装，团建参加活动什么的就是休闲运动装了。网页呢，对于pc，平板，手机当然也得有不同的打扮排版才吸引用户，提升体验。

不然如中国移动手机端的表现是这样的（整个大小被等比例缩放到适应移动端的device-width），根本没法提用户体验：

当然还有个更俗的原因就是你要全方位无死角伺候好你的各种平台的用户，让他们用得爽，然后你每个月才有白花花的银子。

响应式是什么

简单来说，响应式就是在不同的分辨率下，都要让内容以最佳的展现形式呈现给你用户，提升用户体验。如下图：

具体的响应式站点欣赏可参看：media queries

如何下手响应式

第一步：设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

至于为什么要设置这个，答案请移步移动前端开发之viewport的深入理解（人家解释的比我好，在这就不啰嗦了）

第二步：设置断点

断点也就是我们说的media queries。

在说断点之前，我们先说下移动的10086服务，一般都会有服务选择，如按1是话费相关的服务，按2是流量相关的服务，按3是业务办理方面的服务...然后按0是人工服务。

明白了移动的10086服务，我们现在提出设置响应式断点的两大原则：

• 先规划好几个重要断点如pc，平板，手机（相当于1，2，3...具体的业务）
• 遇到特殊情况再添加具体的断点（相当于0键的人工服务）

下面我们来规划下重要的断点，在此之前，先看下bootstrap 4的断点设置：

// 默认为手机端样式

// 等于或大于 34*16 = 544px（手机横屏）
@media (min-width: 34em) { ... }

// 等于或大于 48*16 = 768px(平板竖屏)
@media (min-width: 48em) { ... }

// 等于或大于  62*16 = 992px（pc窄屏）
@media (min-width: 62em) { ... }

// 等于或大于 75*16 = 1200px（ pc宽屏）
@media (min-width: 75em) { ... }

这里再补充一个超大屏断点，一般用于图片居多的站点如视频，购物类站点（单位为em或px都是一样的）

// pc超大屏 1380px
@media (min-width: 1380px) { ... }

我们把以上的断点写个简单的demo感受下：响应式断点设置demo

从以上得出一般要考虑的几个关键断点分别为：手机横屏，平板竖屏，pc窄屏，pc宽屏，pc超大屏（比较适合购物商城，视频类站点），再加上默认的手机样式就构成了全方位海陆空覆盖，正好对应上我们设置断点的第一条规则，主要平台都涉及了。

这里我们提出三个问题：

• 为什么是min-width，max-width可以不？
• 为什么是这些数字，而不是别的数字？

为什么用min-width？

这里先说min-width和max-width的区别：min-width表示屏幕最小宽度为多少，也即等于或大于该值，如min-width:768px则表示屏幕要等于或大于768px才会应用该样式，同理max-width表示最大宽度为多少，也即小于或等于该值。

在做响应式的时候我们一般有个原则叫做是移动优先还是pc优先，bootstrap采用的是移动优先，移动优先的特点是先考虑设计移动的样式，然后再设置断点一步步向大尺寸添砖加瓦增加样式，所以采用min-width（移动端的样式相对来说都比较简单，而pc相对来说要复杂点，所以这种顺序是样式由少到多，由简单到复杂的过程）。反过来如果你的业务是pc优先，那默认是pc的样式，兼容到移动的时候就是由大到小，所以采用max-width（这种方式后面的移动端需要重置覆盖默认pc上的很多样式，比较浪费）

为什么是这些数字？

至于断点数字为什么是这些数字呢？这里的数字大概有三种，一种是范围的代表如544px，一种是分辨率的代表如768px，一种就是我们布局主体内容的实际宽度如992px和1200px。为什么是这三种数字其实跟内容在各个平台的表现有关。对于pc端，我们一般设置主体内容固定宽度居中，所以就以此作为断点；而平板竖屏因为宽度比较窄，所以都会全部占满空间，所以768px就代表了这个宽度；而544px其实我也不知道到底是某个平板的宽度（这个平板很小）还是某个手机的横屏宽度，所以我觉得应该是一个范围，用来界定手机和平板的界限，在这以下都是手机端。（这个问题有知道的请告诉我下，查了很多资料都没找到）

现在看起来一下明白了，那么我们是否可以直接拷贝过来使用就可以呢？

怎么使用这些断点？

使用的第一步复制，这个都问题，但是根本不能体现我们业务的特色。所以到底怎么制定断点，还有待我们进一步讨论，再来两个问题：

• 我们的站点要兼容到哪些平台？
• 用户浏览器分辨率怎么分布？

首先说下第一个问题，大概有五种情况：

第一种只面向pc；第二种pc+平板；第三种平板+手机；第四种只有手机；第五种全兼容如个人博客。

一般内容较小的站点如小公司网站及个人博客可以采用全兼容响应，因为制作成本相对来说比较低，如imweb就是同一内容兼容所有平台；而一些内容非常多，站点比较复杂的则可以采用pc+平板一套内容，手机单独一套内容，如携程。

全兼容模式一般内容体为流式，可以采用刚才的bootstrap关键断点，再额外增加一些局部断点美化页面以提升体验；而pc+平板的其实也比较简单，设置窄屏，宽屏，超大屏即可；最后对于只针对手机的则直接不设置断点（如果你不想在大屏访问的时候全屏可以给外围容器设置一个max-width并居中），但得保证320px/375px/360px下都访问正常，这就要求对整行容器或者里面的部分内容进行流式布局，当然在一些特定的情况也需要额外补充些断点。（额外增加的断点，都相当于10086的人工服务，特殊情况下使用）

现在进入我们第二个问题，用户浏览器分辨率分步：

做响应式就是为了优化我们用户的体验，如果用户的浏览器都在1200px以下，你去做个1380px的超大屏就没有意思了。所以根据我们用户的浏览器分辨率特点制定具体的更有意义的断点尤其重要，省得做些费时费力又没有意义的事。如下图一个站点的pc分辨率占比情况（不包括手机上的数据）：

可以看到1024px占比7%，1200px以上的占了84%（100%-7%-9%），1380px以上占比46%。假设这个站点是商城购物类型的，那么1380px，1200px的断点比1024的断点更重要。

最后：断点的设置跟站点的内容，用户设备的分辨率，用户规模和成本计算都息息相关，所以这些都应该考虑进去，而不是盲目的抄来就用。

布局及显示...

其实这个部分才是最难的，涉及到图片，table，nav等如何显示，一篇文章也说不完，所以推荐下一些学习的资源：

• RESPONSIVE IMAGES 101 最后推荐一本书《响应式Web设计》