css面试题：px、em、rem、vw、vh的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了css面试题：px、em、rem、vw、vh的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

px

pixel，px，表示像素，也就是显示器上一个个的小点，每个像素点都是大小一样的，所以像素被分到了绝对长长度单位中。

有人把px当作相对单位，是相对于观看设备的。对于低 dpi/ppi（像素密度） 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

em

em是相对长度单位，相对于当前对象内文本的字体尺寸（或者说是相对于父元素或者祖父元素文本的字体尺寸）。如果当前对行内文本的字体尺寸未被人为设置，那么相对于浏览器的默认字体尺寸（1em=16px）

通常实际项目中为了简化font-size的换算，我们可以给body或者html设置font-size:62.5%;或者font-size:10px;，这里的10px就是根据16px*62.5%=10px换算过来的。

这样1em=10px,1.2em=12px

rem

rem也是相对长度单位，相对于根元素HTML的font-size属性。例如：font-size:62.5%;或者font-size:10px;

rem和em的区别在于，rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸。

使用em和rem单位的好处如下：

相对性：em和rem都是相对单位，相对于其父元素或根元素的字体大小进行计算。这使得它们能够适应用户设置的字体大小偏好或响应式设计需求。

灵活性：由于em和rem是相对单位，它们可以根据基准字体大小进行缩放。这样，页面上的元素可以随着字体大小的调整而自动调整大小，提供更好的可读性和用户体验。

一致性：使用em或rem单位可以确保页面上的元素在不同分辨率、屏幕尺寸和设备之间保持一致的比例。这有助于实现响应式设计，并提供更好的用户界面一致性。

可维护性：使用em和rem单位可以使样式表更易于维护。因为它们是基于相对值的，而不是固定像素值，所以当需要调整整个页面的字体大小时，只需更改根元素的字体大小即可。

弹性布局：使用em和rem单位可以轻松实现弹性布局，因为元素的尺寸将根据字体大小的变化而自适应调整。这有助于创建适应不同屏幕尺寸和设备的布局。