@dimpurr10年前
12/6
21:12
页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 Fixed 固定布局，到因为宽屏设备和移动互联网的普及产生的响应式和自适应，再到「Mobile First」的设计理念，前端们在可用性方面做的努力越来越多。
REM 是一个在 CSS3 中被提出的新单位，相对 EM 变为了针对根元素 <html> 的 font-size 计算，使得便利性大为提升的弹性布局再次被提上话题。在介绍具体实现之前，不妨先说说为何要选择 EMs 进行布局。
脱离了表格布局的蛮荒时代后，越来越多的基本布局方式被应用在了实践中，当然也不乏多种配合。以下就是几个常用技术的对比。（响应式和自适应这两个名词经常被错误使用，例如 自适应网页设计（Responsive Web Design） 这篇文章
- 固定 Fixed
使用 px 和 pt 这样的绝对单位进行固定布局。在无论什么设备上保持固定的尺寸，在不适合的分辨率下可能导致大面积空白或横向滚动条。最经典，也是被证明极其不友好、维护困难的方法。 - 流动 Fluid
使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。 - 弹性 Elastic
使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来，但几乎是目前最好的布局方式。 - 伸缩 Flexbox
使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大，但是还未普及并且兼容性较差。 - 响应式 Responsive
使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，但是在同一个设备下实际还是固定的布局，并且因为浏览器的支持原因对介质的检测还不实用。 - 自适应 Adaptive
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是利用响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。
