移动端适配：font-size设置

1、作移动端适配的经常使用基础知识

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

逻辑像素=物理像素/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。

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

大部分移动端适配最经常使用的就是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

因此根据公式 物理像素/物理像素下的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

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');

2.同理，假设此处设计稿宽度为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（dprscale）,ok下面的大同小异了，收工。

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.和前者相同，当设备竖着时，物理像素大于1080时，html的font-size就不会变化了，缘由也是同样的，分辨率已经能够去访问电脑版页面了。