em和rem单位

最新推荐文章于 2024-03-15 10:03:37 发布

JJ_Smilewang

最新推荐文章于 2024-03-15 10:03:37 发布

阅读量1.1k

点赞数 4

分类专栏：页面布局文章标签： html5 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124198430

版权

页面布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我们在制作web端页面时，基本都是使用像素px作为单位，但是我们知道移动端设备具有多种多样的宽度，而使用物理单位在不同宽度和不同分辨率的手机上会有一定差异，那么在某些设备可能就会出现页面不美观的问题。所以为了解决此问题，移动端推荐使用rem作为单位。

我们知道还有个常见单位是em，那么它们之间有什么区别呢？

1.em单位

em是一个相对单位，是相对父元素字体大小的。

<style>
    div {
        font-size: 18px;  /* 设置父元素的字体大小 */
    }
    span:nth-child(1) {
        font-size: 1em;   /* 1em相当于1*18px=18px */
    }
    span:nth-child(2) {
        font-size: 18px;
    }
</style>
<body>
    <div>
        <span>em单位如何确定</span><br>
        <span>em单位如何确定</span>
    </div>
</body>
上面的代码两个span标签里面的文字是一样的，虽然第一个span标签设置的字体为1em，第二个span标签设置的字体大小为18px，但是最后得到的效果是一模一样的。

这是因为span的父元素div设置的字体大小为18px，所以1em=18px。

这也间接验证了em单位是相对于父元素而言的。

2. rem单位

rem (root em)也是一个相对单位，不同的是rem的基准是相对于html元素的字体大小。

<style>
    html {
        font-size: 30px;    /* 设置根元素字体大小为30px */
    }
    div {
        width: 15rem;      /* div盒子宽度设置为15rem=15*30px=450px */
        height: 2rem;      /* div盒子高度设置为2rem=2*30px=60px */
        background-color: pink;
        font-size: 1rem;   /* div盒子里的文字大小设置为1rem=1*30px=30px */
    }
    span {
        font-size: 30px;
    }
</style>
</head>

<body>
    <div>rem单位相对html字体大小</div>
    <span>rem单位相对html字体大小</span>
</body>
比如，上述代码中根元素（html）设置font-size=30px; 然后给div元素设置width:15rem; 则换成px就是450px，高度设置2rem，换算过来为60px，字体大小为1rem，换算过来为30px。上图得到的效果也是验证了rem单位的确是相对于根元素字体大小而言的。

1rem=根元素html设置的字体大小，如刚刚例子中就是1rem=30px；

3.em和rem的对比

①em和rem单位都是相对单位，em是根据父元素字体大小而变化，rem是根据html根元素字体大小而变化；

②一个页面父元素文字大小可能不一致，所以1em也就可能代表不一样的大小；但是整个页面只有一个html，所以1rem就等于html元素的字体大小，因此，我们一般使用rem作为移动端的主流单位，可以很好的来控制整个页面的元素大小比例。

JJ_Smilewang

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
em和rem单位

我们在制作web端页面时，基本都是使用像素px作为单位，但是我们知道移动端设备具有多种多样的宽度，而使用物理单位在不同宽度和不同分辨率的手机上会有一定差异，那么在某些设备可能就会出现页面不美观的问题。所以为了解决此问题，移动端推荐使用rem作为单位。我们知道还有个常见单位是em，那么它们之间有什么区别呢？1.em单位em是一个相对单位，是相对父元素字体大小的。<style> div { font-size: 18px; /* 设置父元素的字体大小 *
复制链接

扫一扫