微信浏览器的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了。