【CSS学习】em与rem区别

相对长度单位

em、rem、vw、vh均为相对长度单位，常被用于页面适配

em

em是相对于使用em的元素的字体大小来计算的,em随着元素字体大小的改变而改变
如子元素使用em时不设置字体大小，则会逐级向上查找并继承设置了的字体大小
1em = 1 front-size

演示代码

    <div class="grandpa">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

    .gandpa {
            font-size:20px;
            width: 20em;
            height:20em;
            background-color:black
    }    
    .father {
            width: 10em;
            height:10em;
            background-color:red
    }
    .son {
            width: 5em;
            height:5em;
            background-color: blue;
    }

实际效果

rem

em是相对于根元素的字体大小来计算的,rem随着根元素字体大小的改变而改变
rem中的r代表的是root，网页中的根元素指的就是html
1rem = 1 front-size