2019-04-10移动端使用rem适配及相关问题

移动端使用rem适配及相关问题
移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。可以先看看rem的浏览器支持情况：
*可以看到移动端基本支持：

ios:6.1系统以上支持；

android：2.1系统以上都支持；

桌面端IE支持情况不乐观。*

用法：

现代浏览器，IE9+，FireFox，Safari，Chrome，Opera，默认字体是16px,设置下根元素的字体大小为16px:

    font-size:16px;
}

然后，如果希望某段文字的字体大小是12px,需要设置：

p {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

块大小的设置是类似的，所以整个布局的关键就是设置根元素的字体大小了。设置好根元素字体大小值，布局就可以做到自适应了。

块大小的设置，来个例子：

设置根元素字体大小为37.5px,在iphone6里面需要一个宽100px的块，就是这样了：

---

下面专门谈谈rem的基准值设置。

想要rem适配不同尺寸的设备，就需要针对不同设备设置合适的基准值，如上例所示。

问题来了，基准值设置成多少合适？

一般拿到的设计稿是375px(2倍稿)*2的，也就是iphone6的大小。那么对于iphone6来说，基准值可以设置为37.5px。即设备宽度/10。这里做了一个除以10的计算，是因为不希望font-size值太大。这样使用rem时值也不会太大了。

如果是iphone5，基准值就是32px。

问题又来了，如何根据设备尺寸来设置基准值？

有两个方法，通过css media query 和js添加基准值：

css media query:

@media (min-device-width : 375px) 
and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

用media query来实现难覆盖到所有设备：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

而通过js来设置，可以实现覆盖所有设备：

js来设置：

document.getElementsByTagName('html')[0]
.style.fontSize = window.innerWidth / 10 + 'px';