响应式布局，你需要知道的一切

点选下方 后端罐子君，关注社会公众号

演算法，重新加入后端程式设计复试演算法每星期一节群

https://juejin.cn/post/6951575591099301895

2011年，Google 发布了 Android 4.0，在历经了 Cupcake，Donut，Froyo 等数个甜点中文名称版的插值后，Android就此结束了 Symbian（Symbian）的雄霸地位，迅速攻占了智能手机市场位居全球第一。翌年，百度正式发布了QQ已经开始挺进移动互联网，穆萨也在 2013 年宣布 ALL IN 有线，随着智能化电子设备的普及化和移动互联网时代的来临，积极响应式产业布局这个词已经开始频密地出现在 Web 结构设计和开发领域，做为一位杰出的后端守城狮，要将无与伦比的使用者新体验和最差的工程建设课堂教学做为积极探索的目标 ): balabala…

所以，积极响应式产业布局，Thoubal。不仅Thoubal，我们还要了解它的今生今生，后置科学知识，实现方式和基本原理，以期在前述应用领域时挑选出最合适的技术计划。

阅读完责任编辑，你将 Get 以下习题，

积极响应式结构设计

知名的页面结构雕塑家 Ehan Marcotte 在 2010 年 5 月的一则名叫《Responsive Web Design》的个人该文中，首次提及了积极响应式中文网站结构设计。该文讲到积极响应式的基本概念源于积极响应式建筑结构设计，即卧室或者空间会根据其内部群体数量和壳状而变化。

最近一门新兴的学科“积极响应式建筑(responsive architecture)”已经开始在探讨物理空间根据壳状于其中的人进行积极响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近群体的情况变化的效果。运动传感器与气候控制系统相结合，调整围绕人们周围的卧室的温度以及环境照明。已经有公司制造了“智能化玻璃技术”，当室内人数达到一定的阀值时，它可以自动变为不透明状态，为人们提供更多隐私保护

Web 积极响应式结构设计的理念与之非常相似，只不过在这里，

我们需要适配的不是建筑，而是 Web 页面。

我们期望页面可以根据使用者的电子设备环境，比如系统，分辨率，屏幕尺寸等因素，进行自发式调整，提供更适合当前环境的写作和操作新体验，对已有和未来即将出现的新电子设备有一定的适应能力。

这就是积极响应式结构设计的理念。那么是否有对应的方法论呢？

别急，在谈及实现之前，我们需要了解一些后置知识，比如画素。

画素

甚么是画素？

画素是图像中最小的基层单位，一个不可再分割的点，对应到物理电子设备上（比如排序机屏幕），就是屏幕上的一个光点。我们常说的分辨率就是长和宽上画素点的个数，比如 IPhone X 的分辨率是 1125×2436，代表屏幕横向和纵向分别有 1125 和 2436 个画素点，这里的画素是电子设备画素（Device Pixels）。

1px ≠1画素

前述开发中，你可能发现 Iphone X 的结构设计稿是 375×812，WTF？

这里的 375×812 是 CSS 画素，也叫虚拟画素，逻辑画素。为甚么我们不使用电子设备画素呢？

电子设备画素对应屏幕上的光点，如今的屏幕分辨率已经达到人眼无法区分单个画素的程度了。试想一下，要在 IPhone X 宽不到 7cm 的屏幕上数出 1125 个画素点，想想就让人头疼。所以我们在前述开发中通常使用 CSS 画素，你眼中的 1px 可能对应数个电子设备画素，比如上面的 IPhone X，

复制代码

而上面这个比值 3 就是电子设备画素比（Device Pixel Ratio，简称 DPR）。

复制代码

画素是一个固定基层单位，一般我们不会使用固定画素来做积极响应式产业布局，但是你需要了解他。相反，积极响应式产业布局里经常会用到相对基层单位，比如 EM。

EM

EM 相对于元素自身的 font-size，

 {

;

}

复制代码

如果元素没有显式地设置 font-size，那么 1em 等于多少呢？

这个问题其实跟咱说的 em 没啥关系，这里跟 font-size 的排序准则相关，回顾一下。如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。

理解了 EM，REM 就很简单了。

REM

REM = Root EM，顾名思义就是相对于根元素的 EM。所以它的排序准则比较简单，

1 rem 就等于根元素 html 的字体大小，

 {

;

}

 {

}

复制代码

所以，如果我们改变根元素的字体大小，页面上所有使用 rem 的元素都会被重绘。

EM 和 REM 都是相对基层单位，我们在做积极响应式产业布局的时候应该如何选择呢？

根据两者的特性，

前述开发中，结构设计图的基层单位是 CSS 画素，我们可以借助一些工具将 px 自动转换为 rem，

下面是一个用 PostCSS 插件在基于 Webpack 构建的项目中自动转换的例子，

);

.exports = {

: {

: [

      {

,

      }

    ]

  },

{

})];

  }

}

复制代码

我们已经有积极响应式基层单位了，接下来要怎么让页面支持积极响应式产业布局呢？

第一步需要先设置页面的 viewport。

Viewport

知名的 JavaScript 专家 Peter-Paul Koch 曾发表过三篇有关 viewport 的该文，

建议先看完上述该文。viewport 最先由 Apple 引入，用于解决移动端页面的显示问题，通过一个叫 <meta> 的 DOM 标签，允许我们可以定义视口的各种行为，比如宽度，高度，初始缩放比例等，

复制代码

Peter-Paul Koch 在该文中将移动浏览器的视口分为三种。

layout viewport

为了解决早期 Web 页面在手持电子设备上的显示问题，Apple 在 IOS Safari 中定义了一个 viewport meta 标签，它可以创建一个虚拟的产业布局视口（layout viewport），这个视口的分辨率接近于 PC 显示器。这样一来，由于两者的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构也基本不会被破坏。

layout viewport 是一个固定的值，由浏览器厂商设定，

.documentElement.clientWidth

.documentElement.clientHeight

复制代码

visual viewport

听觉视口（visual viewport）可以简单理解为手持电子设备物理屏幕的可视区域。也就是你的智能手机屏幕，所以不同电子设备的听觉视口可能不同，有了 visual viewport，我们就可以实现页面的拖拽和缩放了，为甚么？

因为有了一个承载产业布局视口的容器。

试想一下，假如我们现在有一台 IPhone 6（375×627），它会在宽为 375px 的 visual viewport 上，创建一个宽为 980px 的 layout viewport，于是使用者可以在 visual viewport 中拖动或缩放页面来获得更好的浏览新体验。

听觉视口可以通过 wind

.innerWidth

.innerHeight

复制代码

idea viewport

我们前面一直在讨论 Web 页面在移动浏览器上的适配问题，但是如果页面本来就是为移动端结构设计的，这个时候产业布局视口（layout viewport）反而不太适用了，所以我们还需要另一种产业布局视口，它的宽度和听觉视口相同，使用者不需要缩放和拖动页面就能获得良好的浏览新体验，这就是平庸视口（idea viewport）。

我们可以通过 meta 设置将产业布局视口转换为平庸视口，

>

复制代码

meta

视口可以通过 <meta> 进行设置，viewport 元标签的取值有 6 种，

了解了视口之后，让我们回到响应式产业布局，与视口相关的几个基层单位有：vw，vh，比率。

vw，vh，比率

浏览器对于 vw 和 vh 的支持相对较晚，在 Android 4.4 以下的浏览器中可能没办法使用，下面是来自 Can I use 完整的兼容性统计数据，

新生特性往往逃不过兼容性的大坑，但是这并不妨碍我们了解它。

积极响应式结构设计里，vw 和 vh 常被用于产业布局，因为它们是相对于视口的，

以 IPhone X 为例，vw 和 CSS 画素的换算如下，

复制代码

我们说比率也可以用来设置元素的宽高，它和 vw，vh 的差别是甚么？

这里只需要记住一点，比率是相对于父元素的宽度和高度排序的。

到这里，相信你已经掌握了积极响应式产业布局里常用的所有基层单位。接下来，我们介绍灵活性盒和栅格，它们都不是基层单位，而是一种新的产业布局计划。

灵活性盒

W3C 在 2009 年提出了灵活性盒，截止目前浏览器对 FlexBox 的支持已经相对完善，下面是 Can I use FlexBox 完整的兼容性情况，

关于灵活性盒模型推荐写作这篇该文 A Complete Guide to Flexbox。

假设你已经写作完并了解了灵活性盒模型，积极响应式产业布局中我们需要关注 FlexBox 里的两个角色：容器和子元素。

container

指定 display 属性为 flex，就可以将一个元素设置为 FlexBox 容器，我们可以通过定义它的属性，决定子元素的排列方式，属性可选值有 6 种，

items

子元素也支持 6 个属性可选值，

灵活性盒模型产业布局非常灵活，属性值也足够应对大部分复杂的场景，但 FlexBox 基于轴线，只能解决一维场景下的产业布局，做为补充，W3C 在后续提出了分层产业布局（CSS Grid Layout），分层将容器再度划分为 “行” 和 “列”，产生单元格，项目（子元素）可以在单元格内组合定位，所以分层可以看作二维产业布局。

分层

关于分层产业布局推荐写作这篇该文 A Complete Guide to Grid。

上述该文非常详细地介绍了分层的一些基本基本概念（比如容器和项目，行和列，单元格和分层线等），使用姿势，注意事项等。做为新兴的产业布局计划，使用时你需要考虑兼容性是否满足，

不过在标准之外，我们可能也正通过其他的一些姿势在使用分层。如果你关注时下一些比较热门的 UI 库，比如 Ant Desgin，Material UI，Element Plus 等，它们以栅格系统的方式实现了对分层部分特性的支持。

UI 库对 Grid 的实现中，通常会使用到新闻媒体查阅，这也是积极响应式产业布局的核心技术。

新闻媒体查阅

新闻媒体查阅（Media Query）是 CSS3 规范中的一部分，新闻媒体查阅提供了简单的判断方法，允许开发者根据不同的电子设备特征应用领域不同的样式。积极响应式产业布局中，常用的电子设备特征有，

选择 min-width 和 max-width 取值的过程，称为电子设备PT5716SB0选择，它可能取决于产品结构设计本身，下面是 百度 Web 生态团队 总结的一套比较具有代表性的电子设备PT5716SB0，

) { }

) { }

) { }

) { }

) { }

复制代码

如果你需要对细分屏幕大小进行适配，ResponsiveDesign 站点上的这篇该文 Media queries for common device breakpoints 可能会有所帮助。

积极响应式文字和图片

相信你已经掌握了积极响应式产业布局的所有科学知识，接下来我们介绍一些最差课堂教学。

文字

大多数使用者写作都是从左到右，如果一行文字太长，写作下一行时容易出错，或者使用者只会读一行文字的前半部分，而略读后半部分。在上世纪就有研究表明，一行 45 ~ 90 个英文字符是最好的，对于汉字来说，一行文字合理的数量应该是 22 ~ 45 个字符。

此外，字体大小对写作新体验同样重要，基本字体一般不小于 16px，行高大于 1.2em。

 {

;

}

复制代码

图片

《高性能中文网站建设指南》的作者 Steve Souders 曾在 2013 年的一则 博客 中提及：

我的大部分性能优化工作都集中在 JavaScript 和 CSS 上，从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 准则。为了强调这些准则的重要性，我甚至说过，“JS 和 CSS 是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。

图片几乎占了页面流量消耗的 60%，雅虎军规和 Google 都将图片优化做为页面优化不可或缺的环节，除了图片性能优化外，积极响应式图片无疑带来更好的使用者新体验。

下面是一些积极响应式图片的最差课堂教学，

1.确保图片内容不会超出 viewport

试想一下，如果图片固定大小且超出平庸视口的宽度，会发生甚么？

内容会溢出视口外，导致出现横向滚动条对不对，这在移动端是非常不好的浏览新体验，因为使用者往往更习惯上下滚动，而不是左右滚动，所以我们需要确保图片内容不要超出 viewport，可以通过设置元素的最大宽度进行限制，

 {

;

}

复制代码

类似的，相同的准则也应该用于一些其他的嵌入式元素，比如 embed，object，video 等。

2. 图片质量支持积极响应式

这是一种支持优雅降级的计划，现代浏览器已经支持了 srcset 和 sizes 属性，对于兼容性不好的浏览器，会继续使用默认 src 属性中的图片，所以我们可以放心大胆的使用。

复制代码

如果我们书写了上面代码中的图片，浏览器会根据下面的顺序加载图片，

除了上述方式外，我们也可以使用 HTML5 标准中的 picture 标签实现类似的效果，

复制代码

小结

我们从积极响应式产业布局的结构设计角度出发，介绍了积极响应式的结构设计理念，后置科学知识（画素，DPR，视口等），相对基层单位（em，rem，比率，vw，vh等），产业布局计划（FlexBox，Gird）以及新闻媒体查阅等技术，其中不乏很多前辈们的最差课堂教学，做为开发者我们应该用这些经验，以更好地优化不同尺寸大小电子设备的使用者新体验。

参考链接

写在最后

责任编辑首发于我的 博客，才疏学浅，难免有错误，该文有误之处还望不吝指正！

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励

最后

欢迎关注【后端罐子君】✿✿ヽ(°▽°)ノ✿