px、em、rem的区别和使用场景

时间：2023-03-29 11:41:09 HTML

的区别在CSS中，常用的长度单位有px、em、rem。绝对长度单位px（像素pixel）：相对于显示设备。对于低dpi设备，1px是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px表示多个设备像素。特点：使用时间长，比较直观。相对长度单位em：相对于元素的字体大小。目前，浏览器默认的字体大小为16pxrem：相对于根元素的字体大小特点：rem和em作为相对长度单位。它们的大小不是固定的，会根据参照物的大小动态变化。与em相比，rem只有一个计算的参考对象：根元素（\），大大降低了计算成本。例如下面两个例子。分别计算孙子的字体大小。父亲字号子字号孙子字号

em为1.2*1.2*1.2=1.728em=1.728*16px计算起来比较麻烦。.father{font-size:1.2em;}.child{font-size:1.2em;}.grandson{font-size:1.2em;}使用rem直接就是1.2rem=1.2*16px，比较直观一些。.father{font-size:1.2rem;}.child{font-size:1.2rem;}.grandson{font-size:1.2rem;}适用场景px:目前我们浏览器的缩放都是通过zoom,而不是改变文字大小。缩放时，带px的字体也会一起缩放。所以可以用px做一些不需要支持移动端的网站。如需提供设计稿，需要详细的px长度。例如，一些无聊的、图像的、图标的。em、rem：它们是专门为可伸缩布局创建的。有些人喜欢调大手机的默认字体，这时候浏览器的默认字体也会相应调大。方便适配各种分辨率的设备。