关于px em rem vh vw那些事儿

前言：在做移动端响应式布局的时候发现这个知识点还是比较薄弱，记录一下

前置知识

px

绝对单位，表示像素，CSS规范的定义，CSS中的px是一个相对长度，它相对的，是viewing device的分辨率。这个viewing device，通常就是电脑显示器。就好比呈现在我们显示器上的一个个小点，每个像素点都是大小等同的。

em

相对单位，em的大小并不是固定的，一般情况下会继承父元素文字大小，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体16px尺寸。

rem

rem是CSS3新增的一个相对单位，与em的区别在于元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

vh&vw

都作为视口单位，vh代表的是view height，也就是显示器可视范围高度的百分比；vw表示的是view width，也就是显示器可是范围宽度的百分比， 1vw = 1% * 视口宽度 。也就是说，一个显示器视口就是 100vw

vw px rem之间的换算

以下面标准为例（受随着根元素字体大小、移动端屏幕大小影响，计算均是进行四舍五入的结果）：

移动端屏幕为750px

那么： 100vw = 750px

所以1vw就等于：1vw =750px/100vw = 7.5px

注意现在1vw等于 7.5px，而我们的1rem是16px (默认情况下 根元素字体大小为16px)

现在进行计算：1rem = 16px/7.5px = 2.133vw

相反：1vw = 7.5px/16px = 0.469rem

上面的计算公式计算同样也可以逆向思考下：

同理，移动端屏幕大小为750px

我们计算1px等于多少vw: 1px = 100/750 = 0.1333vw

显示1px=0.1333vw

现在进行计算：1rem= 0.1333 * 16 = 2.133vw

参考资料

分辨率相关：屏幕尺寸、px、pt - 物理像素和逻辑像素

好用的css 3新单位vh vw

移动端的vw px rem之间换算

个人博客已上线，欢迎来访~
传送门：夜雨炊烟