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;

}