px和em,rem的区别

时间:2021-07-30 16:47:56

任意浏览器的默认字体高都是16px。

px: 像素(Pixel) , 计算机屏幕上的一个点。固定大小;不方便维护;

em:相对于当前对象内 (父元素) 文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。相对大小;

rem:相对于HTML根元素。相对大小;

(所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
font-size:12px;
}
#father{
font-size: 22px;
}
#em{
font-size: 1em;
}
#rem{
font-size: 1rem;
}
#px{
font-size: 32px;
}
</style>
</head>
<body>
<div id="father">
<div id="em">我是1em</div>
<div id="rem">我是1rem</div>
<div id="px">我是32px</div>
</div>
</body>
</html>

px和em,rem的区别

浏览器的兼容性: 除了IE6-IE8r,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。