单位REM的理解

来源:互联网 发布:centos 查端口占用 编辑:程序博客网 时间:2024/04/28 12:44

em是相对于当前的字体大小,rem是相对于页面html 元素的font-size 大小


如下demo:  两个div 的高度都是  36  (html font-size 是18  2rem 就是36,与当前行字体设置无关)



<!DOCTYPE html>

<html style="font-size: 18px;">
<head>
    <title>-webkit-box</title>
</head>
<body >
    <div style=" font-size: 20px;">
        <div style=" background-color: #f00; height:2rem;">
        测试一下EM
        </div>

    </div>

    <div style=" font-size: 10px;">
        <div style="background-color: #0f0;height: 2rem;">
            测试一下EM
        </div>

    </div>
</body>
</html>
0 0