钉子の次元

Dimpurr – an artist, designer and developer from China.

Date Time

13/12/6 21:12

Author

Category

代码宅

Tags

, , , , , , ,
38 Comments

页面布局孰优孰劣：基于REM的EMs弹性布局——可用性的胜利

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 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 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。

弹性布局在一众相对布局中毫无疑问拥有极大的优势。除了以上提到的几点之外，以下几点也是非常有用的特性：

  • 优秀的兼容性
    不同于 FlexBox 等初生标准，浏览器对于 em 的支持非常的好，同时对于 rem 的支持也比预料中稍佳。如果使用 LESS 或者 SASS 等 CSS 预处理器，还可以做对于低版本浏览器 (IE8-) 的 px 降级处理。CanIUse 的兼容表
  • 哇！我看不到像素点
    使用绝对尺寸单位进行布局的最大缺点，就是在动辄1080P的手机屏幕上将小到难以阅读，同时过高的分辨率也会使媒体查询无法发挥应有的功效。但是如果使用 em 字体大小进行布局，就可以方便的利用系统默认字号设定了。
  • 对于浏览器用户字体大小设置的支持
    对于视力障碍和残障人士，可以在浏览器的设置中更改字体的大小，但不同浏览器迥异的缩放模式经常使得使用固定尺寸单位的网站布局崩溃，而这种时候 EMs 单位可以保证完全一致自然的效果。
  • 对于页面缩放的响应式支持
    在平常阅读中也常有缩放页面的需要，弹性布局可以在缩放中正确的激活响应式。反观使用绝对单位判断的响应式，可能在部分浏览器中当缩放的实际显示空间不够时仍然使用为大可视区域设计的样式，容易导致布局崩溃。不过在现代浏览器中已经会激活对应的查询。
  • 保持一致的换行
    完全使用 EMs 单位进行布局的话，缩放过程中文字和图片不会产生流动，可以完美的保持布局的美观和稳定。

尽管如此，随之而来的还有一些美中不足的小问题。如果还有发现其他弊端，也欢迎 在此回复 。

  • 如何惹恼 Work Flow 上的其他人
    在完整的工作流程中，各种原型、视觉、切图很难全部使用 em 作为计量单位，只能在前端实现的时候转换。而且默认的 1em:16px 计算也较为不便，后面会提到一个巧妙的解决方法。
  • 麻烦的父级元素 font-size 继承
    如果使用 em 作为尺寸单位，因为 em 相对父元素 font-size 值进行计算的特性，如果中间有对元素的字体大小进行更改，子元素的全部布局就会出错。这点现在可以很方便的通过相对于根元素的 rem 单位计量来避免。
  • 不该放大的图片
    假如为图片使用了 em 设定尺寸，在响应不同设备的字体时就会按比例增大而导致模糊。但是如果使用常规的 px 设定尺寸，又会失去文字排版均一的好处。考虑到平常的设计中文字流动并没有影响，可以稍微牺牲可用性而用 px 设定图片尺寸。
  • 养成坏习惯容易，好习惯难
    从 ems 单位切换到 px 或者 pt 只需要简单的单位转换，而从绝对单位向弹性布局转换绝对不是一个好的体验。因此在项目开始时就应该确定好弹性布局的基础，否则后期迁移并不容易。

那么如何开始一个弹性布局的页面呢？不不不，除了使用 em 作为单位表示尺寸之外，还有一些可以用到的技巧：

  • 为根元素设置 font-size: 100%
    在 IE 上的文字缩放选项并不符合常规情况下的预期，即在特大和特小的情况下缩放不是平滑的，很容易导致文字被缩放到难以阅读的程度。此时就可以为 <html> 元素指定 100% 的字体大小，以即时响应用户的缩放。
  • 为文档元素设置 font-size: 62.5%
    先前已经提到过，尽管所有浏览器都一致的保持着 16px 的默认字号，但是 1:16 的比例明显十分不方便计算。将字号设为 10px 会使 Ems 布局前功尽弃，此时通过设置为 16px 的 62.5% 就可以很方便的利用十进制进行计算了。当然如果你选择使用的是 rem 为单位，需要牺牲低版本 IE 的兼容性将 <html> 的 font-size 设为 62.5% 。
  • 为媒体查询使用 ems
    对于前面提到的对 Retina 高清分辨率屏幕的支持，使用 em 为单位的媒体查询就是一个有用的技巧。当每行能容纳的文本少于某个值时进行响应而不是宽度为某个像素进行响应，将会大大改善响应式设计的使用体验。
  • 为 rem 使用预处理器
    随着 rem 的推出，弹性布局最大的麻烦之一得到解决。但是尽管 em 的支持已很有历史， rem 却仅支持最新的几个浏览器版本，在低版本浏览器上的显示效果将会是灾难级的。提前使用 SASS 等 CSS 预处理器为低版本浏览器准备好一个 px 为单位的降级很有必要，这里不再详述，可自行查找相关资料。

基本上只要明确了以上几点，就可以按平常的方法继续进行网页的布局。不过正因为弹性布局是一个为阅读体验而生的技术，在这方面稍加注意，还可以更好的发挥弹性布局的优势。

  • 让行高保持节奏
    这是一个提高阅读体验的绝妙方法 —— 让所有元素的行高始终保持为一个值的倍数，想想网页是平铺在一个有行线的笔记本上，让每个元素都完美的占据多格的中间而不压线。请注意，没有阅读体验的弹性布局一文不值。
  • 提供不同文字大小的样式
    很多站点都会为了照顾不同用户提供大中小的样式表，在弹性布局下的实现更加容易。如果用户不懂得更改浏览器的显示设定，仅需要提供 body 元素 font-size 不同的几个样式表，即可马上对整个网页进行缩放。
  • 不必关注像素，而是比例
    尽管为了配合视觉设计我们需要在实际过程中进行 px 到 em 的转换，但是因为缩放的存在，实际需要聚焦的核心不是尺寸本身而是整体布局的比例。只要确定正常视图下布局处在一个合理的大小和位置，剩下的交给 ems 就好了。
  • 脱离样式表可用
    这是和弹性布局无关的一条可用性建议。永远为网页保持合理的 DOM 结构，不为了样式服务颠倒顺序，让网页即使脱离样式表也十分完美。如此一来就算是在屏幕阅读器、字符浏览器等极端环境下，仍然可以保持最大化的体验。

尽管在中国并不十分流行，弹性布局仍然是一个极其优秀和体验良好的布局方式。互联网的发展促进了信息的传播，然而推广网页设计的无障碍化仍然需要很多的努力。在日新月异的网格、瀑布流等布局出现的今天，弹性布局依旧不失为追求简洁和阅读享受的网页设计师的一具利器。

最后吐槽一下，经过长时间的搜集资料和准备，花了两天晚上且中间间隔两周才把这篇文章写了出来。感觉依旧完全是在罗列要点，没有多少文采和趣味可言，不知何时写技术文章的文笔才能好一点呢……

  1. t说道：
    2013/12/06 21:19

    话说它们 – 后三个 – 相互之间不矛盾啊

    回复
    1. Dimpurr说道：
      2013/12/06 21:26

      嗯其实这里面很多都是混用的嘛 …… 然后这类技术配合就称为自适应技术，大概这么个关系w

      回复
      1. t说道：
        2013/12/06 21:27

        你那个 显示所用浏览器 的是怎么做到的?????

        回复
        1. Dimpurr说道：
          2013/12/06 21:56

          Clearison 主题内置了修改过 WP-UserAgent 插件，因为 WordPress 内置了记录评论 UA 的功能，可以配合一些插件进行个性化显示。

          回复
  2. oott123说道：
    2013/12/06 22:46

    试试看ua。

    回复
    1. oott123说道：
      2013/12/06 22:46

      太没意思了，不好玩。

      回复
      1. Dimpurr说道：
        2013/12/06 23:01

        好吧对于未知 UA 直接 UnKnown 是有点不爽 ……
        果然还是找时间改成没收录的 UA 直接显示吧

        回复
  3. Thiece说道：
    2013/12/06 22:49

    最近老写技术文啊

    回复
    1. Dimpurr说道：
      2013/12/06 23:04

      有几篇一直准备写的纪念文一直拖着没写，反倒是技术文好写……某人貌似有不是深夜写不了日常篇的奇异习性

      回复
      1. Thiece说道：
        2013/12/07 00:07

        我也要写几封技术贴了，不然最近要被补番的水贴给占领我的博客了

        回复
  4. xloger说道：
    2013/12/06 22:50

    测试UA+1

    回复
    1. Dimpurr说道：
      2013/12/06 23:02

      啊咧E姐不是 8.1 么怎么变回 8 来了 ……
      话说移动端评论嵌套出了点问题现在好不爽 Orz

      回复
      1. xloger说道：
        2013/12/07 10:48

        /抠鼻 应该我问你才对….我两台电脑都是8.1…

        回复
  5. 涼月かえで说道：
    2013/12/07 08:41

    原本想搞个UA来这的,但是觉得图标不好看
    现在也换了多说，加上也是没用的吧 OTL

    回复
    1. Dimpurr说道：
      2013/12/07 20:25

      嘛图标可以换的 …… 我也在找好看的图标集的个说

      回复
  6. 馒头饭MADfan说道：
    2013/12/07 11:30

    像素党路过。。

    回复
    1. Dimpurr说道：
      2013/12/07 20:25

      同 不过目前决定更新技术了 ……

      回复
  7. 千寻说道：
    2013/12/07 13:16

    =-=成技术博客了

    回复
    1. Dimpurr说道：
      2013/12/07 20:23

      本来就是技术/日常二等分啦 ……
      考完试就会更新两篇日常文的www 主要是技术文好写 纪念文要有心情 ……

      回复
  8. Kunr说道：
    2013/12/08 08:29

    广告发现！

    回复
    1. Dimpurr说道：
      2013/12/08 10:24

      嗯嗯不知道这货怎么过的 Akismat 审核 …… 已 Delete

      回复
      1. Kunr说道：
        2013/12/08 10:26

        所以我才换成 多说的嘛。

        回复
  9. 小新说道：
    2013/12/28 01:12

    来围观膜拜菊苣

    回复
    1. Dimpurr说道：
      2013/12/28 01:36

      都说了是渣渣啊渣渣 T T

      话说小新菊苣不来换发友链 QwQ

      回复
      1. 卜卜口说道：
        2013/12/28 04:33

        膜拜！

        回复
  10. t说道：
    2013/12/30 21:19

    总觉得 Windows logo 有点哪里不对…

    回复
  11. 博客网址之家说道：
    2014/01/03 09:49

    这个主题好小清新啊

    回复
  12. dave说道：
    2014/01/04 01:23

    唔，看来我下次修改主题就改成em吧~

    回复
  13. 牧风说道：
    2014/01/06 13:15

    px党路过, 有些css预处理器更适合处理em吧

    回复
  14. Star Brilliant说道：
    2014/01/08 18:58

    正好纠结于重写前端的页面布局问题。看了钉子君的文章茅塞顿开！

    回复
    1. Dimpurr说道：
      2014/01/08 23:13

      喔！ SB 菊苣来访，稀客稀客

      回复
    2. JN说道：
      2014/01/09 17:07

      好巧你也在这……

      回复
  15. 袅残烟说道：
    2014/02/08 15:12

    钉子君麻烦看看我的博客啊….特效被我改没了….
    http://www.pcwuyu.com

    以上！

    回复
  16. Star Brilliant说道：
    2014/03/29 23:46

    翻 GitHub 时看到 REM-unit-polyfill。
    这货可以提升 rem 的兼容性么？
    http://chuckcarpenter.github.io/REM-unit-polyfill/

    貌似 CSS3 有好多新增的单位啊：rem vw dpi dppx……
    有一个比较完整的参考吗？

    回复
  17. 椎名奈緒说道：
    2014/03/29 23:48

    受教了留爪 > <

    回复
  18. tcdw说道：
    2015/04/07 23:47

    2012年以前用table来布局的路过，当时甚至连padding和margin都不会用，就通过frontpage在页面主体左侧和右侧加上窄窄的一列。

    回复
    1. Dimpurr说道：
      2015/04/08 14:19

      那个时候咱还在玩 Dreamweaver 的图片热点呢， HTML 标记更是没有碰过 ……

      回复
  19. psychola说道：
    2015/10/01 23:07

    我之前写的时候62.5%会有bug 用之后的大小其实会偏大 不仅仅是1：10了

    回复

Theme Slackview by Dimpurr

Proudly powered by WordPress