CSS中的相对单位px, %, em, rem, ex, vw,

ex, vw, vh在移动端开发应用比较多，暂不做讨论。

px

一张图片是由很多小方点组成的，一个小方点就是一个像素（px）。
一台计算机的分别率是800px x 600px指的是计算机显示屏宽800个小方点高600个小方点。严格来说px也属于相对单位，因为屏幕的分辨率不同，1px的大小也是不同的。例如Windows系统的分辨率为每英寸96px, osx系统为每英寸72px。如果不考虑屏幕分辨率，可以把px当作绝对单位来看。

%

• width, heigth, font-size 的百分比是相对于父元素"相同属性"的值来计算的；
• line-height的百分比是相对于父元素的font-size值来计算的；
• vertical-align的百分比是相对于当前元素的line-height的值来计算的。

em

em是相对于"当前元素"的字体大小而言。如果当前元素字体大小font-size=14px，那么1em等于14px。如果当前元素没有定义font-size则会继承父元素的，否则继承祖父元素的，以此类推，如果都没有定义，就会默认16px(浏览器默认的font-size大小)。

使用场景：首行缩进两个字text-indent: 2em;

为了方便px和em的转换，可以利用16px x 62.5% = 10px这个特性，先声明body{font-size: 62.5%} 然后1em=10px;对于一个页面的字体大小，使用px作为单位时可扩展性不好，em是最佳选择，当要调整页面整体大小时，只需要改变根元素大小即可，这个特点在跨平台网站开发中有着明显优势。

rem

em是相对于"当前元素"的字体大小而言。rem是相对于跟元素（html元素）的font-size（px）而言

如果本文对您有帮助，请给我点赞哦~ 谢谢~