rem和em的区别

最新推荐文章于 2024-08-10 22:11:57 发布

vegetable-WEN

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量121

点赞数

分类专栏：移动端布局

本文链接：https://blog.csdn.net/weixin_45525630/article/details/117213880

版权

html css

移动端布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在学习移动端布局相关的内容将rem单位有关的知识分享给大家

rem和em的区别

em:是相对于父元素的字体大小来说的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            font-size: 12px;
        }
        .son {
            /* 相对于父元素 */
            width: 10em;
            height: 10em;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果图:
在这里插入图片描述
由于这里的父元素字体大小设置为12px，所以子盒子的宽度高度为12*10=120px的大小。

rem:是相对于html元素的字体大小来说的,rem单位的优点就是可以通过修改html里面的文字大小也就是根元素的大小来改变页面中的元素大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 13px;
        }
        .father {
            font-size: 12px;
        }
        .son {
            /* 相对于根元素(html)元素 */
            width: 10rem;
            height: 10rem;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果图:
在这里插入图片描述
由于这里的根元素字体大小设置为13px，所以子盒子的宽度高度为13*10=130px的大小。

总结

以上就是今天要跟大家分享的移动端布局rem单位相关知识。

vegetable-WEN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem和em的区别

最近在学习移动端布局相关的内容将rem单位有关的知识分享给大家rem和em的区别em:是相对于父元素的字体大小来说的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
复制链接

扫一扫

专栏目录