rem基础知识

rem：全称root em，是一种相对单位。与em类似，em也是相对单位，em相对的是元素的父级元素字体大小来说的。rem是相对与html元素字体大小来说的，这也就很好理解为什么是root em了，因为html是跟元素啊，这也就好理解了。

使用rem跟媒体查询结合的话，可以实现设备屏幕变化，页面显示也随着变化，从而达到适配不同手机屏幕的效果。

那知道了相对于谁，接下来该考虑如何计算元素的rem了。

这里有个公式 页面元素的rem值 = 页面元素的px / html的字体大小

html字体大小 = 设计稿的宽度 / 分成的等分(15或者10或者其他)

单位需要注意的问题

a. 若两个数值运算时，有一个数值带单位，计算结果就是该单位； 100px/50 = 2px

b. 若两个数值运算时，两个数值都有单位，计算结果的单位是 带rem的； 100rem / 50px = 2rem 或者 100px / 50rem = 2rem

一般的写法：第一个数值带rem的单位，另一个数值不带单位。标准的话：100rem / 50 = 2rem

em同理。

下面分别看下em和rem的效果。

 

rem：相对html根元素字体大小 —— html

<div>rem单位</div>

 

       html {
            font-size: 50px;
        }

        div {
            width: 5rem;
            height: 5rem;
            background-color: pink;
            font-size: 0.5rem;
            margin: 0 auto;
        }

        @media screen and (max-width: 800px) {
            div {
                width: 2rem;
                height: 2rem;
                font-size: 0.1rem;
            }
        }

 

正常显示 

div的宽度rem ： 250rem / 50 = 5rem;

最大宽度为800px，也就是宽度小于等于800px时，适配效果 

div的宽度 ：100rem / 50 = 2rem 

 

em：相对父元素字体大小 —— section

<section>
    <p>em单位</p>
</section>

        /* em */
        section {
            font-size: 25px;
        }

        p {
            width: 20em;
            height: 20em;
            background-color: purple;
            margin: 1em auto;
            font-size: 1em;
        }

显示效果