前端常用单位

像素（pixel）

单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。使用px定义文字，无论用户怎么设置，都不会改变大小。

pt

单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等设计软件当中字体大小所用的单位就是pt，它在广告印刷业当中十分受欢迎，也非常的好用。但现在在网页当中，pt几乎不出现了。使用pt定义文字，当用户设置超过96DPI（转化公式：px = pt * DPI / 72）的值，数值越大，字体就越大。

百分比（%）

是前端开发中的一个动态单位，永远是以当前元素的父元素作为参考进行计算
特点：
1.子元素的宽度是以父元素的宽度作为参考计算
2.子元素的高度是以父元素的高度作为参考计算
3.子元素的padding是以父元素的宽度作为参考计算
4.子元素的margin是以父元素的宽度作为参考计算
5.border宽度不能用百分比来设置

em

单位名称为相对长度单位。它没有一个固定数值，支持小数点后三位数，相对于当前对象内文本的字体尺寸

• 1.当前元素设置了字体大小，那么就相对于当前元素的字体大小
• 2.当前元素没有设置字体大小，那么就相对于第一个设置字体大小的祖先元素的字体大小
• 3.当前元素和所有祖先元素都没有设置字体大小，那么就相对于浏览器默认字体大小

rem（root em）

是CSS3新增的一个相对单位（root em，根em），是相对HTML根元素。通过它既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

• 1.html元素设置了字体大小，那么就相对于html元素设置的字体大小
• 2.html元素没有设置字体大小，那么就相对于浏览器默认字体大小

vw（viewport width）和vh（viewport height）

是一个动态单位，是一个相对于网页视口的单位

系统会将视口划分为100份，1vw就占用视口宽度的百分之一，1vh就占用视口高度的百分之一。

永远都是以视口作为参考

px vw rem之间的换算

1.我们假设pad的设计稿是以1920px为标准的。那么：

100vw = 1920px
1vw = 19.2px
我们想要： 1rem = 100px（这样方便我们在写代码的时候换算）
那么:
100px = 100vw / 19.2 = 1rem
所以：
1rem = 5.208vw。
这时候，我们只要给html的根元素设置：
font-size: 5.208vw即可。

2.同理的，手机端我们假设设计稿是以750px为标准的，那么:

100vw = 750px
1vw = 7.5px
我们想要： 1rem = 100px
那么：
100px = 100vw / 7.5 = 1rem
那么：
1rem = 13.33vw

注：
该文章整理于
https://www.jianshu.com/p/60242358d154
https://www.jianshu.com/p/f9b34885609d