px(Pixel)是基于设备的单位,一个像素相当于显示器上的一个小点。但是,由于不同设备的像素密度是不一样的,因此,像素并不是固定的长度单位。所以,当大家在不同设备上使用px时,元素的大小可能会有所不同。
p { font-size: 16px; margin-bottom: 12px; }
rem(Root EM)是相对单位,相对于根元素的字体大小。默认情况下,根元素的字体大小为16px。所以,当大家设置一个元素的大小为1rem时,它的大小将等于根元素的字体大小,即16px。
html { font-size: 16px; } p { font-size: 1rem; margin-bottom: 0.75rem; }
相对于像素(px),rem的一个重要优点是可以根据根元素的字体大小进行调整而不会影响整个页面的布局。当大家在一个响应式网站上使用rem时,可以根据不同的设备屏幕大小动态调整根元素的字体大小,从而让整个页面根据不同设备自适应。
当大家使用rem时,大家需要注意的是,它也有一些缺点。在一些古老的浏览器上,例如IE8以及更早版本,不支持rem。此外,在大家的CSS文件中使用rem时,还需要计算出相应的数值,而这可能会增加一些额外的工作量。因此,在特定的情况下,使用px可能更加方便。