移动端适配：font-size设置

一、做移动端适配的常用基础知识

移动端分为逻辑像素和物理像素，计算原理如下：

逻辑像素=物理像素/dpr*scale

其中dpr全称为devicePixelRatio设备像素比，使用`window.devicePixelRatio`
可以取到scale一般为
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
中设置的initial-scale大部分情况，设备的devicePixelRatio都是已知，并且不变的。
目前，无视网膜设备devicePixelRatio值为1，视网膜设备为2，不过还有更高的，比如2.5, 3 等，魅族note的手机的devicePixelRatio就是3。

二、移动端适配常见的两种形式

大部分移动端适配最常用的就是rem单位

第一种scale固定

1.设置meta标签的viewport

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

2.设置html的font-size

假设此处设计稿宽度为750px，设备为iphone(其dpr为2)，那么一般html的font-size我们设置为100px（便于计算，也可以根据个人喜好设置，一切以方便为主哈）因此物理像素下html font-size为100px<br />
所以根据公式 `物理像素/物理像素下的html的font-size = 逻辑像素/逻辑像素下的html的font-size`进过移项可得`逻辑像素下的html的font-size =逻辑像素/ (物理像素/物理像素下的html的font-size)`
代入实际的值 逻辑像素下的html的font-size=375/（750/100）=50  其中逻辑像素可以通过 document.documentElement.clientWidth取得，因此js设置代码如下：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

3.font-size一般不用rem表示，我们可以采用媒体查询去设置

@media screen and (max-width:321px){
    .normal-font{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .normal-font{font-size:16px}
}

@media screen and (min-width:400px){
    .normal-font{font-size:18px}
}

4.当deviceWidth大于设计稿的宽度时
- 逻辑像素下的html的font-size始终等于物理像素下的html的font-size
- 比如此例中deviceWidth大于540px，则物理像素大于1080px，应该去访问pc站了。废话不多说了直接上代码：
```
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 540) deviceWidth =750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
```

第二种scale不固定，逻辑像素=物理像素，此时dpr*scale=1

设置meta viewport

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

同理，假设此处设计稿宽度为750px，设备为iphone(其dpr为2)，html font-size设为100px，我们设置html的font-size=deviceWidth / 7.5

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

桥豆麻袋？此处代码似曾相似，这不就是和第一种第二步一样的吗，为啥辛苦走这一遭嘞？
看官切勿着急，请听我娓娓道来，>_> 由于scaledpr===1所以，假设我们的设备为iphone6（dpr===2）
第一种情况scale为1，document.documentElement.clientWidth则为375px。
第二种情况scale变为了0.5，document.documentElement.clientWidth则为750px。
因此第一种情况的html的fontSize为50px，第二种情况的html的fontSize为100px。
不知各位看官看到这些数据是否有种云雾缭绕的感觉，不过总结成我们一开始提到的公式，那就万法归一了：
①逻辑像素=物理像素/（dpr*scale）此时公式里的物理像素概念就是设计稿像素，换个说法而已嘛，呵呵！
所以就有了同一设备（dpr我们无法改变，scale可以自定义）两种情况document.documentElement.clientWidth不同。
②物理像素/100=逻辑像素/html的fontSize html的fontSize=逻辑像素/(设计稿像素/100) =100(逻辑像素/设计稿像素)=100*（dpr*scale）,ok下面的大同小异了，收工。

font-size一般不用rem表示，我们可以采用媒体查询去设置

@media screen and (max-width:321px){
    .normal-font{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .normal-font{font-size:16px}
}

@media screen and (min-width:400px){
    .normal-font{font-size:18px}
}

和前者相同，当设备竖着时，物理像素大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。