css3新增单位
rem
css3 新增相对单位
rem和em单位一样，都是一个相对单位，em是相对于父元素的font-size进行计算，即父元素的font-size为npx，则1em就代表npx，所以em单位在不同的元素或选择器中都不同
因此我们需要一个在所有元素或选择器中都一致的一个单位，rem因此出现了
rem是相对于根元素html的font-size来进行计算的，即根元素html的font-size为npx，则1em就是npx
vw vh
- vw：1vw等于视口宽度的1%
- vh：1vh等于视口高度的1%
- vmin：选取vw和vh中最小的那个
- vmax：选取vw和vh中最大的那个
例如，在桌面端浏览器视口尺寸为650px，那么1vw = 650 * 1% = 6.5px（这是理论推算得出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。
如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。这里的比例关系也推荐不要自己换算，使用 pxtoviewport 的库就可以帮我们转换。当然每种方案都会有其弊端，这里就不展开讨论。
移动端适配方案
flexible rem方案
在进行移动端开发时，我们会发现一个问题，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 90px;
height: 50px;
margin-right: 10px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
我们会发现这段代码在不同设备上的布局会变得截然不同
在设备iPhone6/7/8上
在设备iPhone6/7/8 Plus下
可以发现这两个页面布局完全不同
造成这个问题的原因就是各个设备的屏幕宽度的不同，有些屏幕大有些屏幕小，那么我们怎么来使布局在不同的设备上都能正常显示呢？
关键就在于我们书写css样式的时候，我们使用的单位是px
px是相对逻辑单位，我们写多少px就是定死的值，是无法随设备的宽度改变而改变的，而我们现在要实现同一元素在不同设备上布局的占比要一致，那么我们使用的单位就需要一致
因此我们想到使用rem，rem是相对于html的font-size来计算的，我们使用js在页面布局之前，对当前设备的宽度进行获取，然后除以10，相当于将页面十等分，然后将十分之一设置成rem，这样在不同的设备上rem代表的都是页面宽度的十分之一，自然就能实现不同设备上的适配了
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
上面的代码中，将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。
使用rem布局虽然可以解决适配问题，但是因为我们需要手工完成px单位到rem单位的转换，所以就会变得复杂很多
优点
相对于px固定布局和百分比布局，可以很好地解决不同设备下的尺寸，间隙，字体的相对大小问题
缺点
1.计算繁琐
2.需要js辅助
vh、vw方案
vh、vw方案即将视觉视口宽度window.innerWidth和视觉视口高度window.innerHeight等分为 100 份。
- vw(Viewport’s width)：1vw等于视觉视口的1%
- vh(Viewport’s height) :1vh 为视觉视口高度的1%
- vmin : vw 和 vh 中的较小值(用于设备旋转时)
- vmax : 选取 vw 和 vh 中的较大值(用于设备旋转时)
如果视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。
缺点
- px转换成vw不一定能完全整除，因此有一定的像素差。
- 比如当容器使用vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合calc()函数使用等等…