响应式布局

响应式是什么

随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

产生

• 很早之前，设计网站时有两种选项：

• 它会尽量拉伸以填满整个视窗。
• 固定宽度（左）
• 液态（右）

不难发现，它们都有各自的缺陷，人们只能尽量在两者之间权衡。

• 移动端浏览网页的需求出现后，最初只能为PC和移动端单独开发两个版本。此后移动设备的高速发展也为网站设计带来了很多挑战。

• Ethan Marcotte首次在2010年提出响应式设计，将其描述为液态网格、液态图像、媒体查询三种技术的混合使用。

可以理解为：利用一些技术，使得同一套代码在多个终端能正常合理地展示，而不是为每个终端写一套代码。

响应式的网站很多，我们先来直观感受一下：dropbox

可以看到，首页在三端呈现出不同的效果，都很和谐：

响应式&交互式

这两个词其实没什么联系，这里还是对它们进行了区分：

交互式：根据用户的行为进行相应的变化。

例如：鼠标点击、移动时产生的元素颜色、大小变化；手指拖拽、触摸等。

响应式：根据屏幕和浏览器的不同而显示不同的样式。

例如前面提到的：同一网页在PC和移动端有不同的样式；不同分辨率图片、视频的展示等。

因此，“交互式”是针对用户的，“响应式”是针对设备的。

响应式&自适应

这两个概念很容易混淆。

与响应式相似，自适应也是一种较为灵活的方案，也能根据屏幕大小自动缩放页面元素的大小。但其并不要求适配所有大小的视口，因此针对不同设备，仍需开发不同的页面。

当页面元素较多时，我们无法使用响应式时，就常常用到自适应。例如京东这类电商网站，为了更好的用户体验，就会直接分开设计。

如何实现

媒介查询

响应式布局的核心是媒介查询或媒体查询：

它允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。

首先，我们会在html中设置好媒体查询相关的标签，前端的小伙伴很熟悉了：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

然后在css中设置尺寸的“断点”，编写具体的样式代码。

例如下面一段代码实现了在不同尺寸的屏幕下展示不同大小的字体，注意后者会覆盖前者：

@media screen and (max-width: 1024px){ // 720-1024
    html{
        font-size:16px
    }
}
@media screen and (max-width: 720px){ // 480-720
    html{
        font-size:14px
    }
}
@media screen and (max-width: 480px){ // 0-480
    html{
        font-size:12px
    }
}

这些尺寸断点往往是根据常用屏幕的尺寸得到的。

可以看到，有了媒体查询这项技术，我们就能对不同尺寸区间的屏幕自定义样式了。

布局基础

接下来补充一些布局相关的知识。就不再局限于响应式了，与自适应等其它布局方案也有联系。

各种像素

• 物理像素

• 显示屏的物理像素点在出厂后就固定不变了。
• 通常所说的屏幕分辨率就是指物理像素。

• 设备独立像素

• 相对单位。
• 又称为逻辑像素。

• CSS像素

• 前端在CSS代码中写的px都对应CSS像素。
• 在不缩放的情况下，一个CSS像素就对应一个逻辑像素。

• 设备像素比

• 简称dpr：device pixel ratio
• 物理像素/逻辑像素。

将样式渲染到屏幕时，设备会根据dpr和缩放情况，将CSS像素换算成实际的物理像素。

常用布局单位

• %

• 百分比，需要考虑定位等。

• px

• css像素。

• vh/vw

• 视窗相关单位。
• 视窗宽度为100vw，高度为100vh。
• vmax,vmin分别表示max(vh, vw)和min(vh, vw)。

• rpx

• 微信小程序中的单位，一般是将宽度定为750rpx，也即750rpx == 100vw。

• em/rem

• 两者都是相对尺寸，它们的区别是：em是相对于父元素的font-size，而rem是相对于根元素的font-size。
• 使用rem布局时常用一些方便的转换工具，将px单位转换为对应的rem尺寸。

一些前端喜欢用设计导出的pxcook文件，一个重要原因是它的单位自动转换十分方便，减少了样式计算工作量。

移动端1px问题

这里提到的移动端1px问题指的是：前端按照设计稿，编写代码时指定了边距为1px，但在一些移动端浏览器上实际呈现出来的线更粗。（能被设计一眼发现并逮住）

分析

由以上像素相关知识可得：一般情况下设计稿的1px与设备的1px并不等同。

前端代码中如果设置的是1px的CSS像素，在移动端会渲染为两个物理像素，因此会更粗一点。

那么代码中直接改写0.5px可以解决吗？也不一定，在安卓系统下就不能兼容。

该问题的解决方案有很多，这里就不展开讲了，反正锅给前端。

用例

响应式图片

官方定义是：在不同的屏幕尺寸和分辨率的设备上，都能良好工作以及其他特性的图片。

展示问题

在不同尺寸设备上，我们可以通过使用不同的图片，达到更好的效果，举个官方例子。

某示例网站在宽屏上展示效果如下：

而非响应式图片（左）和响应式图片（右）在窄屏上的展示效果对比如下，此时适用于PC端的图片在移动端已经不再合适，左图的人物过于狭小。

分辨率切换问题

响应式图片不光是设计问题，一定情况下还能减少带宽的浪费。

例如，在小屏幕手机上显示网页，就没有必要嵌入分辨率大的图片。因此，我们可以根据不同设备，提供不同分辨率的图片和不同尺寸的图片。

实现

前端具体实现时，会用到图片的srcset和sizes属性，也是根据媒体条件例如(max-width:480px)来选择对应的图片。

评估

最后，我们总结评估一下响应式方案存在的优缺点。

优点

• 跨平台
• 最重要的特点。
• 减小开发成本
• 一套代码多端使用。
• 一致性较强
• 不同终端展示内容相似。

缺点

• 局限性
• 设计时考虑了不同的设备，那就必然受限。一些复杂场景下无法使用该方案。
• 影响加载速度
• 可能增加了代码量等。

总而言之，布局有着不同的方案，并不绝对，日常就按需组合使用吧。

参考文档

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images