了解并使用CSS中的rem单位.docx

了解并使用CSS中的rem单位可能在你使用收音机或者用其他音乐播放器之前，就己经听过“R.E.M”这个词了在这个乐队眼中，这个词是“浅睡眠时眼球的快速转动” 的缩写，而在 css 中， rem 代表着“以根元素为参照物的 em 单位“他不会让你抛弃你的宗教信仰也不会让你相信那个远在月球的人， 但是它可以帮助你实现一个和谐、平稳的设计作者：大猛来源：segmentfaultl2O16-ll-10 09:55收藏 分享什么是rem 可能在你使用收音机或者用其他音乐播放器之前，就已经听过'R.EM. ”这个词了在这个乐队眼中，这个词是，浅睡眠时 眼球的快速转动”的缩写，而在css中，rem代表着“以根元素为参照物的em单位“他不会让你抛弃你的宗教信仰也 不会让你相信那个远在月球的人，但是它可以帮助你实现一个和谐、平稳的设计根据W3C规范中对lrem的定义:lrem与等于根元素font-size的计算值当明确规定根元素的font-size时，rem单位以该属性的初始值作参照这就意味着lrem等于html元素的字体大小（大部分浏览器根元素的字体大小为16px）Rem 单位 vs Em 单位使用 em 单位最主要的问题是他们与用户元素相关联。

在这种情况下，这些元素可以相互嵌套并且造成意想不到的结果我们来思考下面一个例子，在根元素的文字大小为默认值16px的情况下，我们想要所有列表的字体大小均为12px :1. html {2. font-size: 100%;3. }4.5. ul {6. font-size: 0.75em;7. }假如有一个列表是嵌套在另一个列表下，那么内列表的字体大小将会是外列表字体大小的 75%（也就是 9px ），我们仍然 可以通过几行代码来解决这个问题：1. ul ul {2. font-size: 1em;3. }这样就可以解决这个问题，然而我么仍需要特别关注那些嵌套特别深的元素当使用 rem 单位后，事情就变得简单了：1. html {2. font-size: 100%;3. }4.5. ul {6. font-size: 0.75rem;7. }当所有尺寸都以根元素的文字大小作为参照后，就不再需要为嵌套的元素单独定义样式了使用 rem 单位定义文字大小Jonathan Snook 是第一批使用 rem 单位来定义文字大小的开发者，早在 20ll 年 5 月，他就发表了题为《使用 rem 来 定义文字大小》 的文章。

和大多数 CSS 开发者一样，他必须去解决在 em 单位在复杂的布局上的一系列问题在那时候，老版本的IE依然有很大的市场份额，并且他们不可以缩放由px来定义的文本然而，就像我们之前看到 的那样，在使用 em 单位的情况下，很容易忘记元素之前的嵌套关系，并且得到一个意想不到的结果使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用让我们来看一个例子，假设根元素的文字大小 是 16px ，我们常用的文字大小转换为 rem 值如下：• 10px = 0.625rem• 12px = 0.75rem• 14px = 0.875rem• 16px = 1rem (base)• 18px = 1.125rem• 20px = 1.25rem• 24px = 1.5rem• 30px = 1.875rem• 32px = 2rem正如我们看到的那样，这些值在计算起来非常不方便因此，Snook使用一个叫62.5的方式来解决这个问题然而这 并不是一个创新，因为它早已在 em 单位中运用了：1. body { font-size:62.5%; } /* =10px */2. h1 { font-size: 2.4em; } /* =24px */3. p { font-size: 1.4em; } /* =14px */4. li { font-size: 1.4em; } /* =14px? */因为 rem 单位与根元素相关联， Snook 改进后的方案变为了：1. html { font-size: 62.5%; } /* =10px */2. body { font-size: 1.4rem; } /* =14px */3. h1 { font-size: 2.4rem; } /* =24px */有一点值得考虑的是有一些浏览器不支持 rem 单位。

因此上面的代码可以按照以下方式来改写：1. html {2. font-size: 62.5%;3. }4.5. body {6. font-size: 14px;7. font-size: 1.4rem;8. }9.10. h1 {11. font-size: 24px;12. font-size: 2.4rem;尽管这个解决方案看起来是最好的解决方案，但还是有人不建议使用这种方式Harry Roberts写了一篇文章，里面记录 了他在实际使用 rem 单位过程中的一些感受从他的观点来看，虽然 62.5% 这种解决方案使得计算变得简单（因为字 体大小以 px 为单位时的值正好是以 rem 为单位的 10 倍），但是他迫使开发者重写他们网站中的所有文字大小Chris Coyier 在 CSS-Tricks 提出了第三种解决方案他的解决方式充分利用了到目前为止我们遇到的三种单位根元素 的长度单位依旧采用 px ，模块用 rem 单位，模块内的元素使用 em 单位这种方式可以很容易的操作根元素的大小、 缩放模块，模块内内容的大小以模块自身文字大小来进行缩放Louis Lazaris随后在CSS中em单位的强大之处提 出了他的观点。

在下面的例子中你可以看出 Chris 的解决方案是怎么工作的：代码可以看SitePoint（@SitePoint点击预览）在CodePen写的 《在CSS中使用em和rem单位的方式》点击预览正如你看到的那样，没有利用新技术来解决这个问题可能一些组合方式仅仅被开发者的想象力所限制在媒体查询中使用 rem 单位在媒体查询中利用 em 和 rem 单位，与“行的最佳长度”的概念密切向关，并能给用户带来流畅的阅读体验在 2014 年 9 月， Smashing Magazine 在 web typography 发表了一篇名叫 尺寸那些事: 在 web 响应式设计中掌握文字大小与行宽 度的平衡的文章最有意思的是，文章给出了行的最佳宽度度， 45到85个字符（包括空格和标点符号）， 65 是最理想 的行宽值粗略的估计一个字节大小就是lrem，利用这个方法我们就可以用一种移动优先的方式控制内容的单行文本流：1. .container {2. width: 100%;3. }4.5. @media （min -width: 85rem） {6. .container {7. width: 65rem;8. }9. }然而在媒体查询中使用 em 和 rem 单位作为媒体查询的条件时有一个有意思的细节： 1 rem， 1em 还有浏览器默认文字 大小这三值表示这同一个值。

这样做的原因可以在媒体查询规范得到解释（特别强调）:询中相对单位都是以一个初始值作为基准，这就意味着这些单位永远不会基于声明的结果例如：在 HTML 中， em 单 位与用户浏览器或者用户偏好设置中设置的初始文字大小有关，而不是页面上的样式中定义的文字大小让我们看一个关于这个特性的一个小例子：在 CodePen 上看一个关于媒体查询的 demo首先，在我们的 HTML 文档中，有一个元素将会展现视口的宽度：1. 'Document width: vspanx/span>px'接下来是两条媒体查询语句，一条是使用 rem 单位，另一条使用 em 单位(这里为了简便，使用了 Sass)1. html {2. font-size: 62.5%; /* 62.5% of 16px = 10px */3.3. @media (min-width: 20rem) {4. /* 20*16px = 320px */5. background-color: lemonchiffon;6. font-size: 200%;7. /* 200% of 16px = 32px */8. }10.11. @media (min-width: 30em) {12. /* 30*16px = 480px */13. background-color: lightblue;14. font-size: 300%; /* 300% of 16px = 48px */ (译：原文是 48px)15. }16. }最后，我们使用一点 jQuery 在页面上显示视口的宽度，并且在窗口缩放的时候更新这个值：1. $('span').text($(window).width());2.2. $(window).on('resize', function(e) {3. $('span').text($(window).width());4. });在开头，我们使用了 62.5% 这个方法来说明，修改根元素字体大小不会对媒体查询产生任何影响。

当我们更改窗口的宽度时，我们可以看到在320 px时，第一条媒体查询开始起作用，到480px第二条媒体查询开始起作用任何一条在 媒体查询中对文字大小声明的改变都没有起作用唯一一个可以改变媒体查询中宽度的是在浏览器里更改默认文字大小因为这个原因，在媒体查询语句中使用em单位还是rem单位已经不那么重要了事实上，无论是Foundation v5还是 最近刚发布的Bootstrap v4 alpha都在他们的媒体查询中使用了 em单位使用 rem 单位来缩放文档我们能发现的第三种使用 rem 单位的方式是去构建可缩放组件使用 rem 来定义元素的宽度，外边距和内边距 通过 使用根元素的字体大小作为一个接口使元素缩放一致变为了可能 我们可以通过下面两个例子来看这是怎么起作用的使用 rem 来缩放文档实例一在这个例子里，我们通过媒体查询中更改根元素的文字大小就像上一个章节所讲，这样做的目的是为用户定制不同设 备下的不同阅读体验通过 rem 单位来表示宽度，外边距，内边距，这样所有元素就会基于用户的设备大小缩放让我们看另一个例子： 代码可以看 SitePoint（@SitePoint 点击预览） 在 CodePen 写的 《使用 rem 动态缩放模块》点击预览在第二个例子中，我们使用 JavaScript 来做同样的操作。

这次用户根据自己的需要手动控制界面的大小我们可以使用 多种方式（可以使用数据库，cookie还有本地存储）来存储用户数据，这样就可以给用户搭建一个基于用户偏好的个性化 系统总结在这里总结一下到目前为止我们对 CSS 中 rem 单位的认识很显然，在项目中使用 rem 有许多优点，比如：响应式， 可缩放，增加阅读体验，增加自定义元素的灵活性o rem虽然不是一个通用的解决方案，但是通过谨慎的使用，它还是 可以解决困扰开发者多年的问题 我们每个人都可以去挖掘 rem 的所有潜能从你的编辑器开始吧，实验并向我们分 享您的成果编辑推荐】1. CSS 行内对齐的黑魔法2. CSS实现lpx以内的移动3. css 中的有趣的 border4. H5打造3d场景不完全攻略（二）：。