前段时间试着翻译了KeithJ.Grant的CSS好书《CSS in Depth》，第二章《Working with relative units》，本书对相对单位的介绍units的解释和例子可以说是相当全面了。看完之后发现自己对CSS相对单位了解的不多，希望能分享给大家，于是就有了这个系列的翻译。（如有勘误或翻译建议，欢迎GithubPR^_^）《别说你懂CSS相对单位》系列翻译：如何更愉快地使用em如何更愉快地使用rem【本文】viewport相关单位的应用定义属性对应章节本文中：2.2em和rem2.2.2font-size使用rem可用性：font-size使用相对长度单位2.3停止使用像素思维，好好想想2.3.1设置合理的字体大小默认值2.3.3制作此面板“响应式”2.3.3调整各个组件的大小2.2em和rem2.2.2将rem用于字体大小当浏览器解析HTML文档时，它会创建称为DOM（文档对象模型，文档对象模型）。树形结构，每个节点代表一个元素。是最上层的节点（根节点），下面是它的子节点
和，再往下是它们的子节点，还有子节点等等。根节点是文档中所有其他元素的祖先。它有一个特殊的伪类选择器(:root)，可以在样式表中用这个选择器表示。使用带有类名的类型选择器html，或者直接使用标签选择器，效果是一样的。rem是词根em（rootem）的缩写。rem与根元素关联，不依赖于当前元素。无论你在文档中的什么地方使用这个单位，1.2rem的计算值都等于根元素字体大小的1.2倍。下面的示例代码中声明了根元素的字体大小，在嵌套无序列表中使用rem声明字体大小。【代码片段2.10使用rem声明字体大小】:root{1font-size:1em;2}ul{font-size:.8rem;}1伪类：root相当于html选择器2使用浏览器默认字体大小(16px)本例中root字体大小为浏览器默认字体大小16px（根元素的1em等于浏览器的默认字体大小）。无序列表的字体大小为0.8rem，计算结果为12.8px。由于这仅适用于根元素，因此即使您在列表中嵌套了列表，嵌套子列表的字体大小也保持不变。可用性：对字体大小使用相对长度单位一些浏览器会为用户提供2种自定义文本大小的方法：缩放和设置默认字体大小。通过按Ctrl+或Ctrl-，用户可以缩放页面。这会在视觉上放大或缩小整个页面上的文本或图像（实际上是所有元素）。在某些浏览器中，此更改仅针对当前选项卡且是暂时的，不会影响新打开的选项卡。设置默认字体大小会有些不同。不仅设置入口很难找到（通常在浏览器的设置页面上），而且这个设置是永久性的，直到用户恢复默认值。值得注意的是，此设置对以px或其他绝对单位定义的字体大小没有影响。因为默认字体大小对于某些用户是必需的，尤其是那些视力不佳的用户，所以您应该以相对单位或百分比来定义字体大小。rem简化了很多em带来的复杂性。事实上，rem提供了px和em之间的相对单位折衷方案，并且更易于使用。那么，这是否意味着您应该对所有元素使用rem，并摆脱其他长度单位？当然不是。在CSS的世界里，答案通常是，视情况而定。rem只是您工具箱中的一项。掌握CSS最重要的事情之一就是学会区分在哪些场景下使用哪些工具。我的选择是使用rem表示font-size，px表示border，em表示其他指标，如padding、margin、border-radius等。但是，在必要时，我更喜欢在声明容器的宽度时使用百分比。这样，字体大小就变得可预测了，当其他因素影响元素的字体大小时，也可以使用em来缩放元素的padding和margin。在边框上使用像素很好，特别是如果您想要一条漂亮的线条。以上是我对不同属性使用不同单位的理想解决方案，但同样，这些都是工具，在某些情况下，使用不同的工具可能会取得更好的效果。提示如有疑问，请将rem用于字体大小，将px用于边框，将em用于大多数其他属性。2.3停止使用像素思维去思考将页面根元素的字体大小定义为0.625em即62.5%。模型。[代码片段2.11反模式：全局定义font-size为10px]html{font-size:.625em;}我不推荐这种用法。这种用法将浏览器的默认字体大小从16px减小到10px。这样做的好处是简化了计算。如果设计师告诉你字体大小应该是14px，那么你可以很容易的计算出1.4rem。毕竟，我们仍然使用相对单位。起初，这似乎很方便，但实际上这种实现有两个问题。首先，它迫使你编写大量重复的样式代码。10px对于大多数文本来说太小了，你需要在页面上来回覆盖它。你会发现你声明一个段落（）的字体大小为1.4rem，然后声明导航（