什么是rem您可能听说过“R.E.M.”这个词。在使用收音机或任何其他音乐播放器之前。在乐队看来，这个词是“轻度睡眠期间快速眼动”的首字母缩写，而在css中，rem代表“相对于根元素的em单位”。它不会让你放弃你的宗教或相信月球上的人，但它会帮助你实现和谐、流畅的设计。根据W3C规范中1rem的定义：1rem等于根元素的font-size的计算值。当指定根元素的font-size时，rem单位引用属性的初始值。这意味着1rem等于html元素的字体大小（大多数浏览器的根元素字体大小为16px）Rem单位与Em单位使用em单位的主要问题是它们与用户元素相关联。在这种情况下，这些元素可能会相互嵌套并导致意外结果。让我们考虑以下示例，在根元素的文本大小为默认值16px的情况下，我们希望所有列表的字体大小均为12px：html{font-size:100%;}ul{font-size:0.75em;}如果有一个列表嵌套在另一个列表下，那么内层列表的字体大小将是外层列表字体大小的75%（即9px），我们仍然可以解决这个问题几行代码：ulul{font-size:1em;}就可以解决这个问题，但是我们还是要特别注意那些嵌套特别深的元素。当使用rem单位时，事情就变得简单了：html{font-size:100%;}ul{font-size:0.75rem;}当所有的size都基于根元素的文字大小时，就不再是Styles了需要为嵌套元素单独定义。使用rem单位定义文本大小JonathanSnook是最早使用rem单位定义文本大小的开发人员之一。早在2011年5月，他就发表了一篇名为《使用 rem 来定义文字大小》的文章。像大多数CSS开发人员一样，他不得不在复杂的布局中与em单位搏斗。那时候老版本的IE还有很大的市场占有率，不能缩放px定义的文本。然而，正如我们之前看到的，在使用em单位时，很容易忘记之前的元素嵌套并得到意想不到的结果。使用rem单位定义文本大小的***问题是这些值有点难以处理。我们来看一个例子，假设根元素的文字大小为16px，我们常用的文字大小转换为rem值如下：10px=0.625rem12px=0.75rem14px=0.875rem16px=1rem(base)18px=1.125rem20px=1.25rem24px=1.5rem30px=1.875rem32px=2rem正如我们所看到的，这些值非常不方便计算。因此，Snook使用了一种叫做62.5的方法来解决这个问题。然而，这并不是一个创新，因为它已经被用于em单位：body{font-size:62.5%;}/*=10px*/h1{font-size:2.4em;}/*=24px*/p{font-size:1.4em;}/*=14px*/li{font-size:1.4em;}/*=14px?*/因为rem单位与根元素关联，所以Snook的改进方案变成：html{font-size:62.5%;}/*=10px*/body{font-size:1.4rem;}/*=14px*/h1{font-size:2.4rem;}/*=24px*/有点值考虑到某些浏览器不支持rem单位。所以上面的代码可以重写为：html{font-size:62.5%;}body{font-size:14px;font-size:1.4rem;}h1{font-size:24px;font-size:2.4rem;}虽然这个方案看起来是最好的方案，但是还是不推荐使用这种方式。HarryRoberts写了一篇文章，记录了他在实际使用rem单位过程中的一些感受。在他看来，虽然62.5%的解决方案使计算更容易（因为以px为单位的字体大小恰好是以rem为单位的值的10倍），但它迫使开发人员重写他们站点中所有文本大小的.ChrisCoyier在CSS-Tricks上提出了第三种解决方案。他的解决方案充分利用了我们迄今为止遇到的三种类型的单元。根元素的长度单位仍然是px，模块是rem单位，模块中的元素是em单位。该方法可以很方便的操作根元素的大小并对模块进行缩放，模块中内容的大小是根据模块本身的文字大小进行缩放的。LouisLazaris随后在ThePowerofEmUnitsinCSS中阐述了他的观点。在下面的示例中，您可以看到Chris的解决方案是如何工作的：代码可以通过SitePoint在CodePen上看到（@SitePoint点击预览）《在 CSS 中使用 em 和 rem 单位的方式》点击预览。如您所见，没有新技术可以解决这个问题。也许某些组合仅受开发人员想象力的限制。在媒体查询中使用rem单位在媒体查询中使用em和rem单位与“行的最大长度”的概念密切相关，可以给用户带来流畅的阅读体验。2014年9月，SmashingMagazine发表了一篇关于网页排版的文章，名为SizeMatters:MasteringtheTextSizeandLineWidthBalanceinWebResponsiveDesign。最有意思的是文章给出了最大行宽，45到85个字符（包括空格和标点符号），65是理想的行宽值。一个字节的大小粗略估计是1rem。使用这种方法，我们可以以移动优先的方式控制内容的单行文本流：.container{width:100%;}@media(min-width:85rem){。container{width:65rem;}}不过在媒体查询中使用em和rem单位作为媒体查询条件时有一个有趣的细节：1rem、1em和浏览器默认文字大小这三个值代表同一个值。其原因可以在媒体查询规范中解释（强调）：查询中的相对单位总是基于初始值，这意味着这些单位永远不会基于声明的结果。例如：在HTML中，em单位是相对于用户浏览器或用户首选项中设置的初始文本大小，而不是页面样式中定义的文本大小。让我们看一个这个特性的小例子：在CodePen上看一个媒体查询的演示首先，在我们的HTML文档中，有一个元素会显示视口的宽度：`Documentwidth:px`然后媒体查询语句有两种，一种使用rem单位，一种使用em单位（为了简单，这里使用Sass）html{font-size:62.5%;/*62.5%of16px=10px*/@media(min-width:20rem){/*20*16px=320px*/background-color:lemonchiffon;font-size:200%;/*200%of16px=32px*/}@media(min-width:30em){/*30*16px=480px*/background-color:lightblue;font-size:300%;/*300%of16px=48px*/（翻译：原文是48px）}}***，我们用一点jQuery显示宽度页面上的视口，并在调整窗口大小时更新此值：$('span').text($(window).width());$(window).on('resize',function(e){$('span').text($(window).width());});一开始我们用62.5%的方法来说明修改根元素的字体大小不会对媒体查询产生任何影响。当我们改变窗口的宽度时，我们可以看到第一个媒体查询在320px时开始，在480px时第二个媒体查询开始。媒体查询中文本大小声明的任何更改都没有效果。唯一可以改变媒体查询宽度的是改变浏览器中的默认文本大小。因此，在媒体查询中使用em还是rem单位并不重要。事实上，Foundationv5和最近发布的Bootstrapv4alpha在它们的媒体查询中都使用了em单位。使用rem单位来缩放文档我们可以找到的第三种使用rem单位的方法是构建可缩放的组件。使用rem定义元素的宽度、边距和填充，可以通过使用根元素的字体大小作为界面来一致地缩放元素。我们可以通过以下两个示例了解这是如何工作的。使用rem缩放文档实例——在本例中，我们通过媒体查询更改根元素的文本大小。上一章提到，这样做的目的是为不同设备的用户定制不同的阅读体验。以rem单位表示宽度、边距和填充，以便所有元素都根据用户的设备大小进行缩放。再看一个例子：SitePoint在CodePen上可以看到代码（@SitePoint点击预览）?点击预览在第二个例子中，我们使用JavaScript来做同样的事情。这次用户根据自己的需要手动控制界面的大小。我们可以使用多种方式（可以使用数据库、cookies、本地存储）来存储用户数据，这样您就可以根据用户的喜好为用户构建个性化的系统。总结这里是我们到目前为止所学的关于CSS中rem单位的总结。显然，在项目中使用rem有很多优势，例如：响应性、可扩展性、阅读体验的提升、自定义元素的灵活性提升等。rem不是通用的解决方案，但仔细使用它可以解决困扰开发人员多年的问题。我们每个人都可以充分发挥rem的潜力。开始使用您的编辑器，进行实验并与我们分享您的结果。
