關於移動端的尺寸適配問題（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=設備的寬。也是比較好用的兩個單位。