如何更愉快地使用rem
em和rem
对font-size使用rem
当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body>，再往下的就是它们的子节点，还有其后代节点，如此类推。
根节点是文档里所有其他元素的祖先。它有一个特别的伪类选择器(:root)，在样式表里可以用这个选择器表示。使用帯类名的类型选择器html，或者直接用标签选择器，效果是一样的。
rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。下面的示例代码中，声明了根元素的字号大小，并在嵌套的无序列表中使用rem声明字号大小。
图1
.1 伪类 :root 等价于 html 选择器；2 使用浏览器的默认字号大小（16px）
在这个示例里，根字号大小是浏览器的默认大小16px（根元素的1em等于浏览器的默认字号大小）。无序列表的字号大小为0.8rem，计算结果是12.8px。因为这只跟根元素相关，尽管你在列表里嵌套了列表，嵌套子列表的字号仍然保持不变。
可用性：对font-size使用相对长度单位
一些浏览器会提供给用户2种方式定制文字的大小：缩放和设置一个默认的字号大小。通过按Ctrl+或者Ctrl-，用户可以对页面进行缩放。这在视觉上会把整个页面的文字或图片（其实是所有元素）都放大或缩小了。在一些浏览器，这个改变只针对当前的标签页且是临时的，不会影响到新开的标签页。
设置默认字号大小，会有点不一样。不仅仅是设置的入口比较难找（一般在浏览器的设置页），而且这个设置是永久的，直到用户把默认值还原。值得注意的是，这个设置对使用px或其他绝对单位定义的字号大小无效。因为默认字号大小对一些用户是必要的，尤其是弱视的群体，你应该用相对单位或百分比来定义字号的大小。
rem简化了很多em带来的复杂度。事实上，rem提供了一个在px和em间的相对单位折中解决方案，而且更易于使用。那么，是不是意味着你应该在对所有元素都使用rem，去掉其他长度单位呢？当然不是。
在CSS的世界里，这个答案通常是，看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点，就是学会分辨在什么场景下该使用什么工具。我的选择是，对font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而在必要时，需要声明容器的宽度的话，我更喜欢使用百分比。
这样，字号大小就变得可预测，而当其他因素影响到元素的字号大小时，你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的，尤其当你想要一根漂亮的线的时候。以上就是我对不同属性使用不同单位的理想方案，不过我要再次声明，这些都是工具，在某些特定场景下，利用不同的工具可能取到更好的效果。
提示：当你不确定的时候，对font-size使用rem，对border使用px，以及对其他大多数属性使用em。
停止使用像素思维去思考
把页面的根元素字号大小定义为0.625em或者62.5%，在最近几年来，这样的用法很常见，这是一种模式，或者更贴切地说，这是一种反模式。
[ 代码片段 2.11 反模式：全局地把font-size定义为10px ]
图2
.我并不推荐这种用法。这个用法把浏览器默认的字号大小16px缩小到10px。这样做的好处是简化了计算，如果设计师告诉你字号大小应该是14px，那你可以很轻易地计算出1.4rem，毕竟我们还是在使用相对单位。
一开始，这看起来很方便，但事实上这样的实现方式有两个问题。第一，强制你写了很多重复的样式代码。10px对于大多数文本来说太小了，你需要在整个页面中，来来回回地覆盖它。你会发现，自己把一段段落（<p>）的字号大小声明为1.4rem，然后又把导航（<nav>）的链接字号大小声明为1.4rem，样式代码中还有很多这样的用法。这样引入了更高的错误风险，当你需要修改时发现代码耦合程度比较高，同时也会让样式文件变大。
第二个问题是，你这么做的时候，其实你还是在用像素的思维在思考。虽然在代码里写的是1.4rem，但是在你的脑子里，其实还是想的是14px。在响应式网页开发中，你应该学会适应那些“模糊”的值。1.2em实际等于多少像素，并不重要，你只需要知道这是比继承的字号大一点点，那就足够了。而且，如果在屏幕上这不是你想要的效果，那就改吧。这是需要时间实验和试错的，但事实上，使用px的时候我们也需要这样做。（在第13章，我们会有更具体的方式来优化这个实现方式。）
当使用em时，我们很容易陷入纠结，这个值转化成像素值会是多少呢？尤其对于字号大小。你一直在乘和除以em值，这样你很快就会疯掉了。相反，我希望你可以接受一项挑战，尝试培养先开始使用em的习惯。如果你习惯使用像素，那转成em是需要一定时间和练习的，但相信我，这很值得。
这不是在说你再也不使用像素了。如果你跟一个设计师合作，你可能需要用更精确的像素值去沟通，这没问题的。在项目的开始，你需要声明一个基础的字号大小（通常是对标题或者标注的常用字号）。使用绝对值去描述大小，往往会更加容易。
设置一个合理的字号默认值
先假设你想把默认字号设定为14px。把10px设定为基准值，再在页面中去覆盖它的写法，我们不推荐这种写法，相反，你应该在根元素上直接声明一个值。
在这个代码片段里，目标字号值是继承的，浏览器的默认值16px，那么14/16 = 0.875。
把下面的代码添加到一个新的样式表的最上面，我们会在这上面添加其他代码。这里设定根元素（）的默认字号大小。
图3
现在，你的期望基准字号14px对整个页面的元素有效，你不需要在其他地方重新声明了。你只需要在设计不一样的地方修改成新的字号，譬如标题。
关于本文
译者：@Yuying Wu
译文：
http://wuyuying.com/blog/archives/css-in-depth-stop-thinking-in-px/
作者：@Keith J.Grant
原文：
https://livebook.manning.com/#!/book/css-in-depth/chapter-2
网友评论