美文网首页
rem 详细介绍及使用(一)

rem 详细介绍及使用(一)

作者: 爱鹏学长 | 来源:发表于2019-12-16 15:54 被阅读0次

什么是rem?

rem(root em) 是一个相对单位,类似em单位。

什么是em

em 是相对于父元素字体大小的倍数,例如: 设置某元素的父元素font-size为 10PX 如果设置该元素的宽度为 10em 那么 就相当于把宽度设置为100px 。
例如:

    <style>
        div{
            font-size: 10px;
        }
        p{
            width: 10em;
            height: 10em;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
58A7E163-DFCD-4E29-9F76-A68136D3F9FD.png

通过以上案例,我们可以知道em的作用,那么rem 代表的是 root em ,也就是说rem 是相对于根元素的字体大小。而根元素就是html。
例如:

      <style>

        html{
            font-size: 20px;
        }
        p{
            width: 10rem;
            height: 10rem;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>

得到的结果为:


image.png

通过这个技术,我们就可以让每一个元素都使用rem 单位来定义大小,这样在适配不同移动设备的时候,我们就只要修改html 的font-size 就可以做到让所有的元素都能够进行相应的适配。(比如: 设备屏幕大的时候,就设置html 的font-size 大一些,那么页面中所有的元素的宽、高、字体大小、都能够相应地变大)。

em 也是相对单位,为什么不直接使用em来适配移动端设备呢?

因为em 是相对父元素的,所以如果使用em 进行适配的话,那么就要对每一个父元素都要进行修改,这样做效率会非常低而且也不利于维护。

而我们又是怎么让html 根据不同移动端设备来定义font-size 呢?

这个时候我们就需要用到CSS3中的 @media 功能

读者可查看我的另一篇文章。里面有详细介绍了@media功能的使用
https://www.jianshu.com/p/2b564dbfeee1

相关文章

网友评论

      本文标题:rem 详细介绍及使用(一)

      本文链接:https://www.haomeiwen.com/subject/wxqrnctx.html