HTML布局的几种方式

Web 页面布局是指文本、图像、以及块元素在页面上的呈现方式。 从传统的静态布局到目前主流的响应式布局，随着 Web 的发展，布局变得越来越复杂，实现方式也更加多样化。

本文简单讲述了各种布局的定义，并从页面元素的布局和大小的角度，描述各种布局方式之间的差异。特别要注意，响应式布局与其他布局方式不同，它是一种布局的设计，而不是某种具体的实现方式，是一系列技术的统称。

静态布局（px布局）

传统 Web 布局，网页上的所有元素一律使用 px 作为单位。

布局特点： 任何屏幕分辨率下，页面元素的布局和大小都不会变化，网页始终按照最初写代码时的布局来显示。

设计方法（常规PC端）：

页面内容居中布局，所有样式使用绝对宽度/高度（px）。如果屏幕宽度小于页面内容宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景。

设计方法（移动端，会改变元素大小）：

• 在 viewport meta 标签上设置 width=320，页面的各个元素也采用 px 作为单位。通过用 Js 动态修改标签的initial-scale 使得页面等比缩放，从而刚好占满整个屏幕。

  <meta name="viewport" content="width=320, initial-scale=1, user-scalable=no, viewport-fit=cover">

• 设在 viewport meta 标签上设置 content=width=640,user-scalable=no，页面的各个元素也采用 px 作为单位。由于 640px 超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

  <meta name="viewport" content="width=640, user-scalable=no, viewport-fit=cover">

优点： 对设计师和 CSS 编写者来说都是最简单的，亦没有兼容性问题。

缺点： 显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

流式布局（百分比布局）

流式布局是使用百分数（搭配min-、max-属性使用）为单位定义元素的宽度。页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。

布局特点： 屏幕分辨率变化时，页面元素的大小会变化但布局不变。

设计方法： 使用百分比定义宽度，高度大都还是用 px。宽度往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

缺点： 宽度会按照屏幕进行适配调整，但高度不会。**如果屏幕尺寸相对其原始设计过大或过小，对用户体验并不是特别好。因为在过大或过小屏幕下，有些页面元素的宽度也可能过大或者过小，和固定大小的高度、文字显得非常不协调。

自适应布局（@media布局）

用 @media 为不同的屏幕分辨率定义布局，即创建多个静态布局， 每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（即，元素布局会发生变化），但在每个静态布局中，页面元素大小不随窗口大小的调整发生变化。

布局特点： 屏幕分辨率变化时，页面元素的布局会变化但大小不变。

设计方法： 使用 @media + min-width、min-height 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

缺点： 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高；要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

响应式布局（综合布局）

响应式布局不是单独的技术，它是描述 Web 设计的一种方式、一组最佳的实践，其目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的 Web 浏览器等等）都能显示出令人满意的效果。

响应式布局不是指具体的某种布局方式，它通常是糅合了 流式布局 + 自适应布局 + rem/em/flex/vw/vh 等各种技术来实现的。通常可以认为：用 @media 为不同的屏幕分辨率定义布局，每个布局可以使用流式布局、弹性布局（下方会提到）、vw/vh 单位等技术来实现。

响应式布局几乎已经成为优秀页面布局的标准。

布局特点： 屏幕分辨率变化时，页面元素的布局和大小都会变化。

设计方法： 通常使用 @media 为不同屏幕分辨率定义不同布局，用流式布局、flex、grid 配合相对布局单位进行布局，也可以用其他任何有助于为单一网页在不同设备呈现更好画面的技术和实现。

优点： 适应 PC 和移动端，如果足够耐心，效果完美。

缺点： 各种屏幕分辨率不同的设备越来越多，开发和测试的工作量不小，设计稿也需要多个版本。

弹性布局

弹性布局的概念并不确定，已知的三种说法：一是指 rem/em 布局；二是指 flex 布局；还有一种说法是，弹性布局只是一种实现响应式布局的一部分，不应该单独归为一种布局形式。

rem/em 布局

使用 rem/em 单位进行相对布局。rem 是相对于 html 节点（即根节点）字体大小的单位，em 是相对于父节点字体大小的单位，它们随着字体大小的变化而变化。与百分比相比，rem/em 更加灵活，它们能适应缩进、字体大小、padding、margin 以及元素宽高等情况。

布局特点： 元素采用 em/rem 为单位，在不同屏幕分辨率下，页面元素的大小会等比例缩放但布局不变。

设计方法： 由于 em 为单位，在元素多层嵌套后，其最终计算出来的值比较难控制。所以，一般使用 rem 为单位进行弹性布局，rem 是相对 html 节点的字体大小（即 1rem = html 节点的字体大小，浏览器一般默认为 16px）的单位。页面元素使用 rem 为单位，当 html 节点的字体大小变化时，元素也会自动缩放。

实际应用中，可以根据屏幕尺寸的不同，用 Js 修改 html 节点的字体大小：

// 以 375px 为基准，根据屏幕宽度调整根节点 fontSize，最大不超过32px。
document.documentElement.style.fontSize = `${Math.min(16 * document.documentElement.clientWidth / 375, 32)}px`

优点： 理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

缺点： 最终计算出来的值可能带有小数，在某些情况下可能引起一些 Bug。

flex 布局

目前比较流行的一种布局，使用传统布局难以实现一些复杂的布局，使用 flex 布局实现就变得非常容易。

优点： 简便、完整、响应式地实现各种页面布局。

缺点： 部分浏览器不支持（如：IE10以下）；适用于元素布局，元素大小的响应还需另外处理。

常见问题

响应式与自适应布局有什么区别？

自适应： 当屏幕尺寸变小时，内容的布局会发生变化，比如由一行展示变为分行展示。而内容的大小，宽高不会随着尺寸变化而实时改变。

响应式： 当屏幕尺寸变小时，内容的布局会发生变化，比如由一行展示变为分行展示。而内容的大小，也会随着尺寸变化而实时变化。

vw 和 vh 是什么？

vw 和 vh 是视口单位。所谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响。

vw 是相对于视窗的宽度，视窗宽度是100vw，1vw = 可视窗口的宽度的百分之一。

vh 是相对于视窗的高度，视窗高度是100vh，1vh = 可视窗口的高度的百分之一。

vmin 是指 vw 和 vh 中最小的那个。

vmax 是指 vw 和 vh 中最大的那个。

vw + vh + rem 可以帮助实现完美的响应式布局。

如何选择布局方式？

• 如果只做 PC 端，那么静态布局（定宽度）是最好的选择；

• 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局是最好的选择；

• 如果 PC、移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。