CSS 中相对长度 rem 和 em 如何区别

最新推荐文章于 2024-04-30 13:46:36 发布

袁森Simon

最新推荐文章于 2024-04-30 13:46:36 发布

阅读量3.4k

点赞数 4

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

本文链接：https://blog.csdn.net/simonyuan100/article/details/52089772

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

rem vs em

做为相对长度单位的俩个活宝，都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别：
1，em 的参照倍数对象为其自身字体大小，font-size;如果没有向上继承；
2，rem的参照倍数对象为根元素

事例代码：

<html style="font-size:14px">
<div style="font-size:14px;background:#bbb;border:1px solid #f00;margin-bottom:5px;">
        this is a 14px div
        <p style="font-size:1em;background:#ccc;">
            this is a 1em p in 14px div
        </p>
    </div>

    <div style="font-size:10px;background:#b71119;border:1px solid #006f00;color:#fff;margin-bottom:5px">
        this is a 10px  div
        <p style="font-size:2em;background:#b0b000">
            this is a 2em p in 10px div
            <span style="font-size:1em;color:#b71119">
               span: this is a 1em span in 2emp of 10px div;
            </span>
        </p>
    </div>
    <div style="font-size:1rem;background:#ee7324;padding-bottom: 1px;">
        this is 1rem div
        <p style="font-size:2rem;background: #eee">
            this is a 2rem p in 1rem div
            <span style="font-size:.5rem;color:green">span: this is a 0.5rem span in 2rem p of 1rem div</span>
        </p>
    </div>

第一个灰色的div 下14px字体大小和其子元素1em的P一致；第二个红色的div 下10px 子元素p设置2em 为2倍父元素大小，p下span 设置为1em 可见大小跟P保持一致；第三个橙色div 1rem 子元素p 2rem 孙元素span 0.5rem 可见大小都是跟根元素HTML字体大小成对应比例

使用：
如果是跟父元素成倍数关系缩放大小，可选择em为单位；
rem常用在移动端开发，是非常不错的选择，可解决不同屏幕下的显示不适应情况，后面会介绍如何使用100%布局和rem 来开发移动端业务。

袁森Simon

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS 中相对长度 rem 和 em 如何区别

rem vs em做为相对长度单位的俩个活宝，都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别： 1，em 的参照倍数对象为其父元素 2，rem的参照倍数对象为根元素事例代码：<html style="font-size:14px"><div style="font-size:14px;background:#bbb;border:1px solid #f00;margin-
复制链接

扫一扫