怎样理解rem

最新推荐文章于 2024-08-02 11:53:19 发布

原创最新推荐文章于 2024-08-02 11:53:19 发布 · 477 阅读

1 ·

CC 4.0 BY-SA版权

移动web 同时被 3 个专栏收录

1 篇文章

订阅专栏

响应式

1 篇文章

订阅专栏

rem

1 篇文章

订阅专栏

`粗俗`的理解`px`、`em` &`rem`

相信大家都知道这个单位的概念，很多朋友可能会有点模糊，下面我就简单说一下我的理解。 个人理解仅供参考错误之处望读者批评指出。

首先大家在做网页早期的时候都是使用 px 作为单位处理 html 标签。后面由于移动端的兴起以及响应式的要求引出了em & rem 的概念。具体背景有兴趣的读者自己查阅。
其次说下三者的差别。大家都知道 px 是以像素点为单位一个px 就是一个像素点，通常我们在设置网页的时候会设置页面字体为多少个px 如12px 14px ··· 20px 等。那么一旦设置了这些大小之后页面的字体大小就被局限了。比如说我们在做pc 端网页的时候设置字体大小为16px 因为pc 端分辨率较高阅读起来也很好。但是如果是使用移动端去访问同一个页面的时候16px像素的字体在移动端显得略大，整体的体验感较差。为了适应不同分辨率下的阅读，所以我们就像可不可以引入一个单位根据屏幕的分辨率的大小不同而动态的显示字体的大小。所以就引入em 与 rem 的概念。二者的大小也是相对px 而言的。但是两者会根据父节点元素的大小而改变其字体的大小。通常可以这样理解 1em == 1rem == 16px; 其中 em 的大小是相对于父节点的字体大小而定的如果父节点没有设置字体大小那就会默认逐级往上一级查找，如果都没有设置那么会默认以根节点html的字体大小为父节点大小做参考（html默认字体大小为 16px）。而rem则是相对于 html 根节点的字体大小而定的。怎样理解呢？下面我们举个例子。

    <style type='text/css'>
        .d1{
            font-size:12px;
        }
        .p1{
            font-size:2em; /*由于em 是相对于父节点d1而言所以这里的2em 就相当于font-size:24px; */
        }
    </style>
    <div class='d1'>
        <p class='p1'>我的大小是2em</p>
    </div>

    <style type='text/css'>
        .d1{
            font-size:15px;
        }
        .p1{
            font-size:2em;/*由于em 是相对于父节点而言,但是父节点d2 未设置字体大小所以会往上逐级查找，找到d1 设置了字体大小，所以以d1为父节点作参考那么这里的2em 就相当于font-size:30px; */
        }
    </style>
    <div class='d1'>
        <div class='d2'>
            <p class='p1'>我的大小是2em</p>
        </div>
    </div>

    <style type='text/css'>

        .p1{
            font-size:2em;/*由于em 是相对于父节点而言,但是父节点d2 未设置字体大小所以会往上逐级查找，但是父级节点均为设置字体大小，所以p1 以html根节点（默认为16px）为父级参考元素。那么这里的2em 就相当于font-size:32px; */
        }
    </style>
    <div class='d3'>
        <div class='d1'>
            <div class='d2'>
                <p class='p1'>我的大小是2em</p>
            </div>
        </div>
    </div>

说完em 那 rem 也很好理解，rem相对于html根节点为参考，也就是说如果你的页面内的单位都已rem为单位，那么多有的大小都是参考HTML 根节点做参考的如果你改变了HTML根节点的字体大小就会改变全局以rem为单位设置的字体大小。这里也引入了媒体查询的概念，在移动端的设置也就是根据媒体查询改变根节点的字体大小从而改变全局的字体大小以便于在不同的屏幕宽度下给用户一个良好的体验。举个例子：

    <style type='text/css'>
        .d1{
            font-size:12px;/* */
        }
        .d2{
            font-size:10px;/* */
        }
        .p1{
            font-size:2rem;/* 这里由于rem实现对与根节点而言所以这里的2rem就等于32px*/
        }
    </style>
    <div class='d3'>
        <div class='d1'>
            <div class='d2'>
                <p class='p1'>我的大小是2rem</p>
            </div>
        </div>
    </div>

    <style type='text/css'>
        html{
            font-size:62.5%;
            }
        .d1{
            font-size:12px;/* */
        }
        .d2{
            font-size:10px;/* */
        }
        .p1{
            font-size:2rem;/* 这里由于rem实现对与根节点而言,但是根节点的font-size大小设置为62.5% 也就是 16*62.5% = 10px;所以这里的2rem就等于20px, 特别注意这里很多时候会看见很多页面的根节点的font-size都是写为62.5%；这里是以10px 为单位参考的读者一定要注意。*/
        }
    </style>
    <div class='d3'>
        <div class='d1'>
            <div class='d2'>
                <p class='p1'>我的大小是2rem</p>
            </div>
        </div>
    </div>