REM的理解

html标签的解释

html

font-size的解释

1、浏览器的一般的font-size 默认都是16px
2、font-size 有多种类型的值 
/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
此类为用户默认字体大小（medium即16px）
/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;
此类是对比父元素的fot-size 进行大小修改
/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;
此类比较常用 em也是相对于父元素的大小进行倍数的放大和缩小
/* <percentage>，百分比值 */
font-size: 80%;
此类相对于父元素的大小

当我设置rem时，我设置的是什么

设置 html （文档根元素）的font-size大小来实现其他元素的相对大小

1.  html {
  font-size: 20px;
}

div{
   width: 10rem;
}

当一个div 设置 10rem的值的时候，其大小是相对于html的20px的20倍，也就是400px。

浏览器的最小的font-size是12px，那只能设置font-size为12么

先看一个例子，具体代码和效果如下

font-size大小设置

<div class="ceshi">
        这是一段测试的文字
</div>
<div class="rem">
        这是一段测试rem的文字
 </div>

 html {
        font-size: 8px;
    }

    .ceshi {
        border: 1px solid red;
        width: 200px;
        height: 200px;
        color: blueviolet;
        font-size: 12px;
        margin-right: 10px;
        float: left;
    }
    .rem{
        border: 1px solid red;
        width: 20rem;
        height: 20rem;
        font-size: 1rem; 设置为1rem 也就是8px  最终的值还是12px
        color: blueviolet;
        float: left;
    }

结论： font-size 可以设置的比12px 小，并且对于rem还是有效果的，在计算相对大小的时候还是以设置的值的大小进行换算，可以看出长度和高度的大小就是按照此规律，但是对于字号已经达到最小值的12px的字体，则依然还是12px的大小显示

font-size 设置的百分比是对于父级元素的比例 我设置html 的font-size 62.5% 的时候相对于的父级是什么

1、html即文档的根元素 当设置 %比的值的时候，相对于的父级就是系统默认值，也是就是 16px
2、系统默认 16px  当设置 html font-size 62.5% 的时候 
16*62.5 = 10px 也就是说这个时候的html 的font-size 的基础值为 10px  
因此其他的子元素在使用rem的时候就是在10px 的基础上进行倍数放大  
1rem  = 1*10px  = 10px
2rem = 2*10px = 20px 
如果设置为 6.25%   1rem = 1px  则px 可用rem替换