主题预览

色调:

如果您使用的浏览器过时,不支持OKLCH颜色。颜色设置会不生效。

轻盈的鱼
幻想变成轻盈的鱼, 畅游在自由的海洋

深入分析css中单位px和em,rem的区别

css
458 字

PX特点

IE无法调整那些使用px作为单位的字体大小;

EM特点

em的值并不是固定的;

em会继承父级元素的字体大小。

比如父元素设置了1.2em,子元素也设置了1.2em 那么事实上子元素设置的是1.2*1.2 em

rem特点

rem是CSS3新增的一个相对单位(root em,根em)。

  • 这个单位与em有什么区别呢?

使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素,比em容易计算。

  • 使用rem的问题

IE8及更早版本不支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

个人建议

同时使用rem和px,使用px只是为了兼容ie6-ie8这些不支持rem的浏览器

具体实现

根元素设置62.5%

比如

 html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}