前端常见的单位介绍和区别

单位，在各个领域都是很常见的。那我我们前端有哪些单位呢？让小编给你细细道来。

px

• 1px===1个像素点，相对单位长度单位，相对的是设备的物理像素；
• 试用于固定长度单位的场景中；
• 各浏览器兼容性良好；

pt

• 单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等设计软件当中字体大小所用的单位就是pt； 

em

• 参考物是父元素的font-size，具有继承的特点。
•  em会继承父级元素的字体大小
• 1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推……

rem

• 大小是相对于HTML的根元素设置的；
• rem只会继承HTML的root中设置的，不会层层继承父元素的大小；
• root字体大小*rem=实际px大小，比如root节点font-size:16px,一个盒子width为10rem，实际盒子宽度就是160px；

vw与vh

• vw：视窗的宽度，1vw = 视口宽度的1%；
• vh：视窗的高度，1vh = 视口高度的1%；

vmin 和 vmax

• vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
• 浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px
• 浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px vmin取宽度高度两者更小者/100
• vmin取宽度高度两者更小者/100
• vmax取宽度高度两者更大者/100

还有一些常用单位欢迎大佬们补充嘿嘿