目录
1，绝对单位和相对单位
对于现在的互联网，页面有可能会在各种型号的屏幕上展示。既可能是一个5英寸的手机屏，也有可能是一个30英寸的大屏幕。面对这种情况，前端就应该声明一些样式规则，可以让该效果在任何场景下都能跑通。而一个合理的方案就是响应式设计。
响应式 —— 在CSS中，指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。
在响应式布局这个问题上，相对单位是CSS提供的工具之一。
2，em的使用分三种情况：
1，把各个方向的padding等的值设置为字号大小
设置padding、height、width或border-radius等属性
<style>
.padded {
font-size: 16px;
padding: 1em;
}
</style>
<body>
<div class='padded'>hahaha</div>
</body>把padding赋值为1em，乘以字号，得到一个值为16px的padding渲染值。使用相对单位声明的值会由浏览器转化为一个绝对值，（称为计算值）。在这个例子里，将padding改为2em会生成一个32px的计算值。如果同一个元素的另一个选择器，用一个不一样的字号值去覆盖它，这会改变em在这个域下的基准值，那么padding的计算值也会相应变化。
在设置padding、height、width或border-radius等属性时，使用em可能会很方便，因为它们是以当前元素的字号大小作为基准值的。如果它们继承了不同的字号大小，或者用户更改了字体设置，这些属性会均匀地缩放。
如下面例子：
.box {
padding: 1em;
border-radius: 1em;
background-color: lightgray;
}
.box-small {
font-size: 12px;
}
.box-large {
font-size: 18px;
}使用样式：
<span class="box box-small">Small</span>
<span class="box box-large">Large</span>
效果如下：
2，对font-size 使用em
em是以当前元素的字号大小作为基准值的。但如果把一个元素的字号设为1.2em的时候表示什么？相对单位在该处的处理是：在font-size上的em会先从继承到的字号大小衍生出来。
举例：
<style>
body {
font-size: 16px;
}
.slogan {
font-size: 1.2em;
}
</style>
<body>
We love coffee
<p class="slogan">We love coffee</p>
</body>
在<body>标签里面，声明字号为16px。在 .slogan中，该类继承父元素的字号大小。 slogan声明的字号大小是1.2em，此时：引用继承的字号16px，16 * 1.2 = 19.2，所以计算字号值是19.2px。效果如上图。
3，对font-size和padding等同时使用相对单位
这时候事情就变得有点不好控制了。。
举例：
body {
font-size: 16px;
}
.slogan {
font-size: 1.2em;
padding: 1.2em;
background-color: #ccc;
}此时 slogan中，font-size 的计算还是 16 x 1.2 = 19.2
但是，padding的计算是相对font-size 的，所以计算的结果是
1.2 x (16 x 1.2) = 23.04
这就很不好了，因为现在大家对padding的期待值也是19.2。尽管从原理上好理解，但是它非常不好用，不够直观，容易出错是最大的问题，也是大家不愿意使用em的原因之一。
为了解决这个问题，我们可以选择rem
3，rem
在HTML 中，根节点是文档里所有其他元素的祖先。它有一个特别的伪类选择器（:root），在样式表里可以用这个选择器表示。rem是根em（root em）的缩写。rem和根元素关联。不管你在文档中的什么地方使用rem，1.2rem的计算值都等于1.2倍的根元素的字号大小
:root {
font-size: 1em;
}
ul {
font-size: .8rem;
}- 1 伪类 :root 等价于 html 选择器
- 2 使用浏览器的默认字号大小（16px）
根元素的字号大小是浏览器的默认大小16px（根元素的1em等于浏览器的默认字号大小）。
ul的字号大小为0.8rem，计算结果是12.8px
rem简化了很多em带来的复杂度。事实上，rem是提供了一个介于px和em间的相对单位折中方案。那么，是不是意味着我们应该对所有元素都使用rem呢？当然不是。
在CSS的世界里，这个答案通常是：看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点就是，能够分辨在什么场景下该使用什么工具。我的选择是：
对
font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而声明容器的宽度的话，我更喜欢使用百分比。
3.1，相对单位和响应式（一个例子）
<style>
:root {
font-size: 0.75em;
}
@media (min-width: 400px) {
:root {
font-size: 0.875em;
}
}
@media (min-width: 800px) {
:root {
font-size: 1em;
}
}
.panel {
padding: 1em;
border-radius: 0.5em;
border: 1px solid #999;
}
.panel > h2 {
margin-top: 0;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="panel">
<h2>Single-origin</h2>
<div class="panel-body">
We have built partnerships with small farms around the world to
hand-select beans at the peak of season. We then carefully roast
in <a href="/batch-size">small batches</a> to maximize their
potential.
</div>
</div>
</body>在上面的代码中，定义了三套根元素的font-size 尺寸， 第一套样式规则，声明了小屏幕中的默认字号大小，这是在较小的屏幕上看到的大小。然后使用媒体查询，把400px和800px分别作为两个分水岭逐级增加字号的大小，覆盖掉默认的代码。
因此尽管你没有直接对这个面板做任何的修改，它现在是响应式的。在小屏幕上字号会被渲染成更小的（12px）。然后，在宽大于400px和大于800px的，字号会分别放大到14px和16px。
媒体查询（media query） —— 通过
@media规则来声明样式，在不同的屏幕尺寸或者媒体类型（如打印机或显示器）下，触发对应的样式控制。这是响应式设计的关键要素。
参考链接：