移動端適配：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就不會變化了，緣由也是同樣的，分辨率已經能夠去訪問電腦版頁面了。