rem如何适配移动端

浏览器设置rem常用方法

rem，它是相对根元素 html 的 font-size 字体大小来变化的。而浏览器的默认根元素字号是16px，也就是说默认情况下，浏览器的 1rem = 16px。

那么在使用过程中，咱们不可能通过16px来计算，因为那么太麻烦了。比如你要设置一个 div为 25px 的宽度，你得将 25px/16px = 1.5625rem，然后才能正常使用rem。

所以，咱们可以直接更改根元素，让它简单一点。
将根元素的 font-size = 16px，改为 font-size = 10px 或者 font-size = 62.5%，
相当于是 (10px/16px) = 62.5%，这样 1rem = 10px。上述宽度25px的div，就可以写成 25px/10px = 2.5rem，方便了计算。

---

当然，上述这个可以适用于大部分PC端浏览器，而针对移动端，我们就要采取更精确的计算法方式，请听我一一道来。
在移动端，咱们的根元素可以以最小宽度分辨率的iPhone4/5宽度为基准，也就是 根元素字号大小是12px。
因为当今移动端的分辨率太多了，如果一一去计算，那么太麻烦了。以下是通过JS来实现自动获取并设置。

---

JS计算并设置根元素的字号

• 先自动获取当前网页的宽度。
• 以分辨率宽度为320px作为基准进行 重置 根元素字号。
• 注意：这段重置代码可以放在 head 下引用，避免页面切换时发生明显抖动。

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

例如：
若给定的稿图宽度为：375px（iPhone6/7/8），那么根元素将自动设置： 12*( 375 / 320 ) = 14.0625(px)，也就是：1rem = 14.0625(px)
若给定的稿图宽度为：360px（Glaxy5S），那么根元素将自动设置： 12*( 360 / 320 ) = 13.5(px)，也就是：1rem = 13.5(px)

---

通过上述的JS计算可以很方便的解决移动端适配问题，当然，我们这里还可以使用CSS3中的媒体查询来处理。

---

媒体查询

既然只是为了根据屏幕宽度来设置元素的字体大小，那我们完全也可以通过css3媒体查询来完成这部分工作。

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

---

详情可以参考：简单粗暴的移动端适配