rem布局

rem布局

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

vscode插件：px to rem

计算规则

REM的计算公式

例:html 设置font-size:16px 1rem = 16px

那么640px = 640/16 =40rem

建议设置为100px 方便计算

首先，给页面的html定义一个100px的

html{ font-size:100px;}/设定基础rem/ 1rem / 100px. /16px

案例：rem相对于html来设置大小

<style>
        html{
            font-size: 30px;
        }
        body{
            font-size: 16px;
        }
        .big{
            font-size: 20px;
        }
        .demo{
            font-size: 20px;
        }
        .demo2{
            font-size: 1.5em;
        }
        .demo3{
            font-size: 1.5rem;
        }
    </style>

    <div class="demo">
        hello1
    </div>
    <div class="big">
        <!-- 相对于父级的倍数大小 -->
        <div class="demo2">hello2</div>
    </div>
    <div class="big">
        <!-- 相对于根标签html的倍数大小 -->
        <div class="demo3">hello3</div>
    </div>