移动端适配：动态设置html元素的font-size（页面使用rem做单位）

一、前言：

首先我们要了解的知识点：

1.物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2.逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3.设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR = 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？因为手机端的DPR变大了。
没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。
获取设备DPR的方法还是有的：
1.在JavaScript中，通过window.devicePixelRatio来获取
2.在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

二、页面适配开发

1、设置页面的viewport视口

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />

2、我们以iPhone6设计稿来进行移动端的开发（设计稿是750px）
那么我们得到的deviceWidth = 375px; 为了方便在开发的时候量尺寸好算，我们设置html的font-size为50px。
那么本来根据设计稿量出来的div是80px的话我们要先除以2，得到实际的宽度px，然后要转换为rem，我们还要除以html的font-size，即再除以50，即可得到单位rem的数值。
也就是说：拿到一个iPhone6设计图，量到的px像素值来除以100，那么得到的值就是多少rem。

deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px
deviceWidth = 375，font-size = 375 / 7.5 = 50px
deviceWidth = 414，font-size = 414 / 7.5 = 55.2px
deviceWidth = 500，font-size = 500 / 7.5 = 66.6667px

这个deviceWidth就是viewport设置中的那个device-width。
（设置html的font-size的值为多少其实就是为了方便计算，如果你的设计稿是iPhone4，那么html的font-size = 320 / 6.4 = 50px方便计算）

动态设置HTML元素的font-size代码如下：

var html = document.documentElement; //获取到html元素
var hWidth = html.getBoundingClientRect().width;//获取到html的宽度
if(hWidth > 640) hWidth = 640; // 当hWidth大于640时，则物理分辨率大于1280（这就看设备的devicePixelRatio这个值了），应该去访问pc网站了
html.style.fontSize = hWidth/7.5 + "px"; //设置HTML的字体大小 font-size = 50px，1rem = 50px

3、如果页面的字体不想使用rem作为单位，那么就使用媒体查询来设置body的font-size。

@media screen and (min-width: 320px) {
    body {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    body {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    body {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    body {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    body {font-size: 22px;}
}
 
@media screen and (min-width: 640px) and (max-width: 640px) {
    body {font-size: 28px;}
}

html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}


1rem=html font-size = 50px
86/100=.86rem
  .header
    height: .86rem