微信瀏覽器的rem使用填坑

首先，讓咱們來明確一個概念

rem（font size of the root element）是指相對於根元素的字體大小的單位（能夠聯想一下em）。

1. 網頁載入文字從小變大的狀況

只考慮微信等正常豎屏瀏覽器裏話，能夠用css直接把大部分機型的根字體大小定義好，例：

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 48px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 50px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 376px) and (max-width: 393px) {
    html {
        font-size: 52.4px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 394px) and (max-width: 412px) {
    html {
        font-size: 54.93px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 413px) and (max-width: 414px) {
    html {
        font-size: 55.2px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 415px) and (max-width: 480px) {
    html {
        font-size: 64px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
    html {
        font-size: 72px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
    html {
        font-size: 85.33px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 641px) and (max-width: 720px) {
    html {
        font-size: 96px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 721px) and (max-width: 768px) {
    html {
        font-size: 102.4px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4px;
        font-size: -webkit-calc(13.33333333vw);
        font-size: calc(13.33333333vw);
    }
}
複製代碼

可直接粘貼使用，若是考慮的webview的話，就須要使用js設置html根目錄的font-size了。

2. rem設定致使尺寸不對

接上一個問題，在不使用js動態設定font-size的狀況下，一般咱們會使用1rem=100px做爲基礎單位，在設計稿是750px寬的時候真的是至關方便，根據上面的css，750px的font-size是102.4px,不過這2.4px是能夠忽略了，肉眼是看不出多大區別的。但當我拿到640px寬度的設計稿時，font-size是85.3px，這種狀況下若是仍是按照1rem=100px來計算就會出現問題了，這種時候就要把rem的基礎單位改爲85px了。