em,rem,px,vw,vh

基础介绍

px

px像素（Pixel）。是相对屏幕的分辨率而言的。

px特点

值是固定的。不同分辨率上显示效果有差异

em

em 相对于当前对象内文本的字体大小，如果当前文字大小没设置。相对的是文字的默认大小

em 特点

1.em的值不是固定的
2.em会继承父级元素的字体大小

注意：未经过调整的浏览器都符合：1em = 16px，先要换算到px会比较复杂，12px = 0.75em，10px = 0.625em。 可以简化一下换算，声明body的字体大小为 62.5%， 声明后rem值就变成 1rem = 16px*62.5% =10px 所以 12px = 1.2em，方便做计算。

rem

rem 是css3新增的一个相对单位，跟em 的区别是 rem 只是相对于 根元素（root em）意思就是说你首先声明 html 节点的font-size，然后内部所有使用rem的元素的大小都是自动根据html的字体大小来进行计算。

vw，vh

vw （viewport width）是视口宽度的单位。不受显示器分辨率的影响。假设你的可视窗口是1000px 那么 100vw 就是1000px 类似于百分比。区别在于 百分比是相对于父元素而言 ，vh 同理

兼容性主流都支持 安卓webview 在4.4 以下有问题，需要做兼容处理

<!--视口的设置可以通过-->
<meta ​content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user->scalable=no" name="viewport">

如果需要精确1px的方案的话 我们可以通过设置动态视口的viewport的scale 来实现。可以抹平devicePixelRatio 像素密度这个差异，但是在像素密度为3的设备上，scale是除不尽的 会有一些误差。