px-em-rem

[maodouchen]

px em rem区别 px相对长度单位，相对于像素。 em相对长度单位，相对于父级。1em = 父级px rem相对长度单位，相对于根元素（html）。 1em = 根元素（px）

em

<style>
body {
    font-size: 62.5% // 浏览器默认字体大小是16px  那么body里的字体大小是默认字体大小的62.5%。所以body里的字体大小是10px，所以子元素字体大小1em = 10px,也可以写成font-size:10px;
}
.div1 {
    font-size: 2em;  //   20px, 所以子元素字体大小1em = 20px
}
.div2 {
    font-size: 2em; // 40px, 所以子元素字体大小1em = 40px
}
</style>
<div class="div1">
    div1
    <div class="div2">
        div2
    </div>
</div>

rem

<style>
html {
    font-size: 62.5%; // 浏览器默认字体大小是16px，那么html里面的字体大小默认是10px，所以1rem = 10px;
}
.div1 {
    font-size: 2rem;  //  font-size: 20px;

}
.div2 {
    font-size: 2rem; // font-size: 20px;
}
</style>
<div class="div1">
    div1
    <div class="div2">
        div2
    </div>
</div>