css单位：％ ， ｐｘ ， ｅｍ ， ｒｅｍ ， ｖｗ ， ｖｈ 等
ｅｇ：设置一个矩形的宽高比为１６:９，并且岁屏幕宽度自适应时，除了用 ％， 其他单位时很难做到的
ｐｘ ： 结合 Ｍｅｄｉａ Ｑｕｅｒｙ进行阶梯式的适配
％ ： 按百分比自适应布局
ｒｅｍ ： 结合ｈｔｍｌ元素的ｆｏｎｔ－ｓｉｚｅ来根据屏幕宽度适配
ｖｍ，ｖｈ ： 直接根据视口宽高适配
什么场景使用，什么单位最合适！
１，在视觉上要求固定尺寸的元素上使用ｐｘ，比如１ｐｘ线，４ｐｘ的圆角边框
２，在字号、（大多数）间距上使用ｒｅｍ
３，慎用ｅｍ
％ 参考父容器
ｖｍ和ｖｈ 参考视口 ｅｇ：１ｖｍ ＝ １％的视口宽度
１，ｐｘ
rem vs. pxpx是我比较喜欢的一个单位，简单又直接。但理性驱使，还是要合理考虑使用场景。px的性质决定了它只能用于固定尺寸。也就是说，如果视觉设计师规定，这个边框宽度必须是2px。那这种情况下就不需要讨论了。除了固定尺寸用px，其他大部分情况都可以使用rem。
２，使用ｒｅｍ更方便
比如你想根据字号自动调整字符间距，可以这么做：
.content {
font-size: 1rem;
letter-spacing: .03em;
}
但再仔细想一下，letter-spacing由.content的字号决定，而它又由html的字号决定。那为什么letter-spacing不直接用rem呢？
３，为什么慎用ｅｍ？
ｅｍ会叠加计算 ， 在这个机制下太容易犯错了，因为你不知道这段css指定的字号具体是多少。
外层span的字号是16px（浏览器默认值），所以1.5em之后是24px。由于字号是继承的，导致内层span的字号继承过来是24px，再经过1.5em之后就成了36px。
所以，就算要用em的话，尽量不要用在继承属性（font-size）上，除非你真的清楚你在做什么！
现在考虑一个实际的开发场景，一般来说都是先有视觉稿才能开发。两种情况：
一、假设视觉稿按iPhone 6和iPhone 6+，及其他尺寸各出了一份，那你就按照Media Query去适配。
二、设计师只给你一种机型的视觉稿，以iPhone 6为例，750x1334，2倍屏下转换后是375x667。
第一种情况也不讨论了，通过Media Query断点适配后，其实你处理的还是第二种情况。那第二种的意思是，你要根据宽度为375px的稿子，扩展到适配任意宽度的屏幕。（页面高度跟业务有关，不用关心，宽度肯定是固定的）接下来拿到视觉稿如下：
测量后主要参数如下：
1、页面间距10px2、文字间距10px，字号16px3、A高度100px4、B高度50px，上间距30px很快就能写出HTML结构和CSS。
body { padding: 10px; background: #f6f0ee;}
.box { padding: 10px; font-size: 16px; color: #fff; box-sizing: border-box;}
.box-1 { height: 100px; background: #1daedc;}
.box-2 { margin-top: 30px; height: 50px; background: #ddbe97;}
完美符合要求。然后视觉开始提要求了，大屏上要把字体放大、间距放大。这时候的一个选择是，问设计师是要适配哪种屏幕，字号是多少，间距是多少。技术上再通过Media Query微调。
@media(min-width: 414px) {
// 这里不写了，按视觉要求量化即可
}
另一个选择可以反过来做。首先按rem作为字号、容器高度、外间距的单位。那么代码可以改为：
html { font-size: 16px;}
.box { font-size: 1rem;}
.box-1 { height: 6.25rem;}
.box-2 { margin-top: 1.875rem; height: 3.125rem;}
其他的样式规则不变，目前的结果和之前的是等价的。如果再加一点魔法，通过Media Query改变iPhone 6+的html字号，其他元素的属性就会自动变化。
@media(min-width: 414px) {
html { font-size: 17.664px;
}} ／／ 17.664 = 414 * 16 / 375。
由此可以得到html的font-size计算公式为：fontSize = deviceWidth * 16 / 375;前提是你的html有这条meta属性：
rem有个明显的优点，它可以通过少量代码解决大部分问题。
html的font-size该如何设置由于（大部分）浏览器的默认字号为16px，所以一般来说把html的font-size归一化为16px是比较合适的实践方式。同时可以参考这篇文章。为了大家以后参考方便，我列了一些常用的Media Query断点（以iPhone 6为基准）。
@media only screen and (min-width: 320px) {
html { font-size: 13.65px;
}}
@media only screen and (min-width: 360px) {
html { font-size: 15.36px;
}}
@media only screen and (min-width: 375px) {
html { font-size: 16px;
}}
@media only screen and (min-width: 390px) {
html { font-size: 16.64px;
}}
@media only screen and (min-width: 414px) {
html { font-size: 17.664px;
}}
@media screen and (min-width: 640px) {
html { font-size: 27.31px;
}}
大家可能还会看到一些文章中建议把html字号设成62.5%。html { font-size: 62.5%;}
因为刚提到浏览器默认的字号为16px，因此换算成百分比就是62.5% = 1 / 16。
用Media Query的缺点是什么？它是分段函数，对于宽度在[320, 360)区间内的屏幕，会适用同一套方案。最完美的应该是线性函数，怎么做？很简单，用vw即可。
html { font-size: 4.266667vw;}
用1行代码代替之前6个冗长的Media Query，还不错吧。
如何提高rem的可读性
我们来谈最后一个话题。
当你知道html的font-size怎么设置后，肯定想问，难道我每次写代码时，还得做个除法，把rem的值计算出来吗？
我相信稍微“现代”一点的开发者，都会用到CSS预处理。基于这个工具，事情就很好办了，以LESS为例，两步操作如下：
// 1\. 按iPhone 6的视觉稿，基准字号为16px，
因此可以设置一个LESS变量。
@px: 16rem;
// 2\. 通过LESS内置的除法自动运算。
比如用到16px的字号时，写成16/@px即可，最后会计算成1rem。
.example {
font-size: 16/@px;
margin: 20/@px 0;
padding: 20/@px 10/@px;
}
