页面布局孰优孰劣：基于REM的EMs弹性布局——可用性的胜利
http://blog.dimpurr.com/ems-layout/
页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 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 结构，不为了样式服务颠倒顺序，让网页即使脱离样式表也十分完美。如此一来就算是在屏幕阅读器、字符浏览器等极端环境下，仍然可以保持最大化的体验。
尽管在中国并不十分流行，弹性布局仍然是一个极其优秀和体验良好的布局方式。互联网的发展促进了信息的传播，然而推广网页设计的无障碍化仍然需要很多的努力。在日新月异的网格、瀑布流等布局出现的今天，弹性布局依旧不失为追求简洁和阅读享受的网页设计师的一具利器。
最后吐槽一下，经过长时间的搜集资料和准备，花了两天晚上且中间间隔两周才把这篇文章写了出来。感觉依旧完全是在罗列要点，没有多少文采和趣味可言，不知何时写技术文章的文笔才能好一点呢……
转载于:https://www.cnblogs.com/zhp404/articles/4282023.html
页面布局孰优孰劣：基于REM的EMs弹性布局——可用性的胜利相关推荐
- 孰优孰劣：基于工业模型的数字化 与 基于数字互联网的工业化
孰优孰劣:基于工业模型的数字化 与 基于数字互联网的工业化 这其实代表了两种商业思路,前者 以德国工业4.0为特征,后者以美国GE提出的工业互联网为典型. 工业4.0 关键字:数字孪生Digi ...
- 网络推广专员浅析网络推广中如何分析网站建设水平孰优孰劣？
随着网站建设开发技术的成熟,网站建设从业人员也越来越多,很多站长并不是专业从事网站建设工作是半路出家的,像这种半路出家的群体并不在少数,他们在经过网站建设知识的积累后正式进入网络推广市场.那么对于这部 ...
- 京东与淘宝孰优孰劣？
标准是什么? 按照商业的一般标准,大致上可以依照市值来评估企业的成功与否,并且由于投资者是天生带有盈利的目的所以往往也能体现出企业未来的前景.目前阿里巴巴系的市值为5917.16亿,京东系为911.8 ...
- 刷新 翻看 我 关注 实时 疫情 物联网卡小知识:互联网流量卡vs物联网流量卡孰优孰劣?
大家好,最近很多朋友问小编,互联网最离不开的其实是流量卡,很多互联网应用离开了流量卡没有网络就实现不了互联网的便利,那么物联网其实也是建立在物联网流量卡的基础上的,那么互联网流量卡和物联网流量卡之间有 ...
- 何必分个孰优孰劣呢？！
最近在相当多的BBS上看到这个SBO和哪个R3相比,和金算盘,用友,金蝶相比.很是心烦,也颇为不屑. 我的Blog也不是太多人来看,大部分是关心业内的一些人士吧,所以我才会尽可能地说些实在 ...
- 话里话外:家族化管理模式和职业化管理模式孰优孰劣
中国改革开放三十年,在民营企业中有大批老板现今五六十岁,现在或未来都要考虑为企业选好接班人的问题.他们该如何传位呢?"世袭制"古已有之,"能者居之"亦古已有之. ...
- 终极对决！Dubbo 和 Spring Cloud 微服务架构到底孰优孰劣？
微服务架构是互联网很热门的话题,是互联网技术发展的必然结果.它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.虽然微服务架构没有公认的技术标准和规范或者草案,但业 ...
- Elasticsearch对垒8大竞品技术，孰优孰劣？
来自:DBAplus社群 作者介绍 李猛(ynuosoft),Elastic-stack产品深度用户,ES认证工程师,2012年接触Elasticsearch,对Elastic-Stack开发.架构. ...
- 实时流处理框架Storm、Spark Streaming、Samza、Flink，孰优孰劣？！
https://mp.weixin.qq.com/s?__biz=MzU1NDA4NjU2MA==&mid=2247486490&idx=1&sn=e25a05be8cf98c ...
最新文章
- hdu 3265 线段树扫描线（拆分矩形）
- 台式电脑如何截屏_电脑如何安装安卓系统 台式机装安卓系统教程
- 【MySQL】在Windows下更改datadir
- JVM系列（一）--JVM运行时数据区
- java web 数据库操作_Java Web----Java Web的数据库操作(二)
- AI如何驱动软件开发？华为云DevCloud 权威专家邀你探讨
- Webwork2之Action Result Type（转载）
- 设为首页+加入收藏夹+打印网页
- 背包九讲问题——超详细
- Vim 编辑器底端 [noeol], [dos] 的含义
- 数据质量管理有哪些方法
- 【论文笔记】Joint Cascade Face Detection and Alignment
- 缠中说缠，最好用的缠论画笔和中枢的指标公式 通达信用
- 安卓开发调用python脚本_android开发调用python脚本
- 长连接、短连接和心跳（有图有案例）
- javascript简单介绍总结（二）
- 我进滑雪场前做的功课
- C语言编程三子棋程序代码,C语言实现三子棋源代码
- selenium自动化测试-鼠标键盘操作
- 一加5应用未安装怎么解决_一加手机x安装不了软件下载是什么原因解决方法