对于rem的感想

最新推荐文章于 2024-07-19 14:19:51 发布

原创最新推荐文章于 2024-07-19 14:19:51 发布 · 565 阅读

0 ·

CC 4.0 BY-SA版权

对于rem的感想

在这里解析一下rem这个单位,现在代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
    <link rel="stylesheet" href="remgx.css">
    <style rel="stylesheet" type="text/css">
        html{
            font-size: 10px;
        }
        .remgx{
            background-color: purple;
            width: 10rem;
            height: 10rem;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="remgx">
        REM感想
    </div>
</body>
</html>

效果图如下:
在这里插入图片描述
在这里可以知道的是html中font-size:10px;与div中width:10px;height:10px相乘得出div中的width:100px;height:100px;所以在这里rem的作用就是这样。
接下去，我来说一下rem在不同设备中起到的作用。如图下：

不同设备中，padding值做到相应的改变，可以用rem来实现，在上面图片上，已经做了充分地说明，这样的话，就可以做到在不同设备上，不同的屏幕上，padding值做着相应的改变，而不是以个固定的值。