如何设置`rem unit`

什么是rem

• rem是一种用来衡量长度的css单位
  • 作为字体大小的单位
  • 作为width height margin等单位
• 1rem === 网页根元素的字体大小
  image.png
• 默认情况下html的font-size是16px,因此1rem === 16px

如何使用rem

比如一个div的宽度是16px,此时你可以使用1rem替代

div {
    font-size: 1rem;
}

如果此时你修改html的font-size

html {
    font-size: 62.5%
}

div {
    font-size: 1rem; //等价于10px
}

如果页面中所有的单位都使用了rem，就可以通过修改html的font-size大小按照比例缩放页面

如何修改rem unit

根据介绍1rem === 网页根元素的字体大小因此，我们可以通过修改html元素的font-size大小,改变rem unit的值

• 默认情况：rem unit === 16px

• 为方便通常将rem和px的换算改成1:10所以可以通过

  html {
    font-size: 62.5%
  } //将rem unit 该成10
  
  
  

作用

用来做不同屏幕的适配器。比如屏幕变大，可以修改html font-size修改大小

@media screen and (min-width: 500px) {
    html {
        font-size: 16px;
    }
} //屏幕大小在500-799 之间 1rem = 16px

@media screen and (min-width: 800px) {
    html {
        font-size: 20px;
    }
}//屏幕大小大于800 1rem = 20px
//屏幕变大 字也在按照比例的放大