css-相对单位em，rem

最新推荐文章于 2021-07-02 14:36:39 发布

qq_35089721

最新推荐文章于 2021-07-02 14:36:39 发布

阅读量184

点赞数

分类专栏：技巧文章标签： css rem em

本文链接：https://blog.csdn.net/qq_35089721/article/details/83026877

版权

技巧专栏收录该内容

31 篇文章 0 订阅

订阅专栏

摘录：“对font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而在必要时，需要声明容器的宽度的话，我更喜欢使用百分比。

这样，字号大小就变得可预测，而当其他因素影响到元素的字号大小时，你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的，尤其当你想要一根漂亮的线的时候。”

如果字体大小是16px，那么1em=16px。

在所有现代浏览器中，其默认的字体大小就是“16px”。因此在浏览器下默认的设置将是：

1em = 16px

先假设你想把默认字号设定为14px，那么14/16 = 0.875。

:root {                    
  font-size: 0.875em;      
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-em,rem</title>
    <style>
        :root{
            font-size:0.825em;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .panel{
            /*margin padding 用em 相对于父类*/
            margin: 1em;
            padding: 1em;
            border: 1px solid #ccc;
            border-radius: 0.5em;
        }
        .panel h2{
            /*字体大小用rem*/
            font-size:0.8rem;
            font-weight: bold;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
<div class="panel">
 <h2>title</h2>
    <div class="panel-body">
        We have built partnerships with small farms around the world to
        hand-select beans at the peak of season. We then carefully roast
        in <a href="/batch-size">small batches</a> to maximize their
        potential.
    </div>
</div>
</body>
</html>

qq_35089721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-相对单位em，rem

摘录：“对font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而在必要时，需要声明容器的宽度的话，我更喜欢使用百分比。这样，字号大小就变得可预测，而当其他因素影响到元素的字号大小时，你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的，尤其当你想要一根漂亮的线的时候...
复制链接

扫一扫