关于移动端的尺寸适配问题（rem）

近期在做移动端的项目，用到rem的相关知识。先上代码。

//css
@media screen and (width: 320px) {
    html, body {
        font-size: 8.533px;
    }
}

@media screen and (width: 360px) {
    html, body {
        font-size: 9.6px;
    }
}

@media screen and (width: 375px) {
    html, body {
        font-size: 10px;
    }
}

@media screen and (width: 414px) {
    html, body {
        font-size: 11.04px;
    }
}

@media screen and (width: 412px) {
    html, body {
        font-size: 41.2px;
    }
}

@media screen and (width: 768px) {
    html, body {
        font-size: 20.48px;
    }
}

@media screen and (width: 1024px) {
    html, body {
        font-size: 27.306px;
    }
}

上面的css是以设计图宽度为750px设计的媒体查询，即1rem=10px。具体的写法是，在设计图上量取长度，然后除以20，就得到相应的rem值。即（量取的为40px就写成2rem。）
还有两个常用的单位：
vh和vw。这两个单位没有具体的定量，但是比较好用。他们是根据设备的宽高设定的。即100vh=设备的高，100vw=设备的宽。也是比较好用的两个单位。