CSS 中 px、em 与 rem 的用法和区别
2020-10-13 本文已影响0人
limengzhe
px
px 全称 Pixel（像素），相对单位，相对于屏幕分辨率，在浏览器中它不随其它元素的变化而变化。
em
em 相对单位，相对于有效 font-size 的单位。元素的 width height padding margin 等属性也可以使用 em 。
- 浏览器的默认字体通常是
16px，所以默认情况下: 1em=16px：
<body>
<p style="font-size: 1em">我的字号是 16px</p>
<p style="font-size: 2em">我的字号是 32px</p>
</body>
- 如果父元素设置了
font-size属性：
<div style="font-size: 20px">
<p style="font-size:1em">我的字号是 20px</p>
<p style="font-size:2em">我的字号是 40px</p>
</div>
rem
rem 全称 root em，相对单位，是 CSS3 新增的一个单位，它的值也不是固定的，但相对的是 HTML 根元素的 font-size。也就是说，rem 的值只受到 <html> 字体大小的影响，并不受其它元素字体大小的影响。
- 浏览器的默认字体通常是
16px，所以默认情况下: 1rem=16px：
<html>
<p style="font-size: 1rem">我的字号是 16px</p>
<p style="font-size: 2rem">我的字号是 32px</p>
</html>
- 如果
<html>设置了font-size属性：
<html style="font-size: 20px">
<body>
<p style="font-size: 1rem">我的字号是 20px</p>
<div style="font-size: 100px">
<p style="font-size: 1rem">我的字号是 20px</p>
</div>
</body>
</html>
