rem适配计算

以移动端375px设计稿为例：

1. 新建variables.scss文件，在HTML页面中编写使用rem()需引用改文件

@function rem($n){
    @return $n/(200)+rem;
}

2. 新建common.scss文件

html{
    font-size:calc(100vw/1.875)
}

这个表达式的理解： 100vw是设备视口的总宽度，18.75是计算1rem=400px，即750px/400px=1.875

3. 实际应用：

html{
    font-size:calc(100vw/1.875)
}
div{
    width: rem(400);
    height: rem(400);
    background-color:black;
    span{
        font-size:rem(12)；
        color:#ffffff；
        font-weight:blod;
    }
}

rem()的括号中填写的是UI设计图中真实大小(px)

4. 计算：

rem(400)=2rem
rem(12)=0.06rem

2rem => 2*375/(750/400) => 2*375/1.875 => 400px
0.06rem => 0.06*375/(750/400) => 0.06*375/1.875 => 12px

如果屏幕视口总宽度为750px计算：

2rem => 2*750/(750/400) => 2*750/1.875 => 800px
0.06rem => 0.06*750/(750/400) => 0.06*750/1.875 => 24px