移動端font-size適配方案

概述

這是我研究移動端頁面時的思考，記錄下來供之後開發時參考，相信對其餘人也有用。因爲我寫移動端頁面寫的還比較少，一些問題都還沒遇到，因此個人這篇博文難免有些錯誤的地方，還請大佬多多指正。

這篇文章是基於網易的移動端屏幕適配方案而來的。

思考

在移動端開發中，對於頁面屏幕適配要解決哪些問題？

1. 對於不一樣的dpr，圖片會有模糊的狀況，怎麼適配？
2. 對於不一樣的屏幕寬度，怎麼適配？
3. 對於不一樣的內容：容器，文字和圖片，怎麼適配？

對於移動適配，我我的但願達到的效果是，對於不一樣的屏幕，在視覺上爲了方便閱讀，頁面只須要簡單地放大或縮小便可。可是因爲流式佈局(根據父容器的百分比來決定寬高)具備很大的侷限性，因此咱們採用rem佈局。

dpr

dpr是什麼？簡單來講，dpr是實際像素與看到的像素的比值。好比說你看到的是1px，那麼在dpr爲2的設備上，它其實是由2個像素點組成的，每一個像素點的實際大小是0.5px。

dpr會形成什麼問題？好比一個200px*300px的圖片，在dpr爲1的設備上，顯示正常，可是在dpr爲2的設備上，因爲實際像素變成了400px*600px(雖然實際大小仍然只有200px*300px)，那些多餘的像素是設備推測出來的，因此會有圖片變模糊的問題。

怎麼解決？網上的解決方法說的很複雜，真的聽不懂。。。可是簡單來講，解決方案是使用400px*600px的圖片，可是規定它的大小爲200px*300px，因此在dpr爲1的設備上，圖片是被「壓縮」過的，可是並不影響視覺效果；而在dpr爲2的設備上，由於自己的圖片大小是400px*600px，因此那些多餘的px就從這裏取了，不會經過設備推測，因此視覺效果會更好。

那麼對於dpr>2的設備呢？實際上視覺效果影響不大，能夠忽略。等到有足夠的影響成爲一個問題以後，再來解決。

屏幕寬度

機制是：對於不一樣寬度的屏幕，咱們用js取到屏幕的寬度，而後根據這個寬度同比縮放font-size，因爲咱們的css是用rem寫的，因此頁面內容也會同比縮放，達到咱們想要的效果。下面具體來說實施方案。

首先給html設置viewport：

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

而後，對於手機端，咱們但願以iphone6做爲參照，在其它屏幕上同比放大或縮小。

(1)以iphone6做爲參照，iphone6的寬度是375px，dpr爲2，因此對於上面顯示的375px的圖，咱們須要的圖片大小是750px，因此咱們拿到的psd設計圖的寬度必須是750px。爲了方便書寫rem，咱們但願psd設計圖上750px對應的rem是7.5rem。而設計圖上面750px在iphone6上面的實際大小是375px，因此咱們須要設置iphone6的font-size=375/7.5px=50px。更通常地，因爲移動端的font-size的默認值是16px，因此咱們更傾向於用一個百分比來設置font-size：font-size=50/16=312.5%。(注意：用px和百分比沒有本質上的不一樣。)

(2)在其它屏幕上進行縮放，爲了解決這個問題，咱們用js來讀取屏幕的寬度，而後利用這個寬度來進行縮放，代碼以下：

var initScreen=function(){
    $("html").css("font-size", document.documentElement.clientWidth / 375 * 312.5 + "%");
}

最後，咱們須要解決橫屏問題和用戶手動縮放問題，他們本質上都是改變屏幕寬度的問題，因此咱們監聽resize事件或者onorientationchange事件，當發生的時候，從新調用initScreen方法。代碼以下：

$(window).on('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
    setTimeout(initScreen, 200);
});

注意：上面的代碼並非原生js，要引入zepto庫！也能夠用原生js實現，不過要考慮兼容性問題，我就不貼出代碼了。

另外，爲了增長代碼的健壯性，在js加載不成功的時候也能進行適配，建議在css加上媒體查詢：

html{ font-size: 312.5%; }
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 320%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
    html{ font-size:400%;}
}
@media screen and (min-width:640px) and (orientation:portrait){
    html{ font-size:533.33%;}
}

容器，文字和圖片

我查了不少資料，對於其它適配方案，好比流式佈局，柵格化佈局等，都對容器，文字和圖片的尺寸有不一樣的寫法。可是因爲我這個方案只是縮放，並無額外的需求，因此對於容器，文字和圖片的大小，都用rem就好了，暫時沒有想出不能用rem的狀況，等之後遇到問題再來記錄。

注意：我這種適配方案中，1rem的實際大小是50px，而不是100px。因此0.12rem的字體，在設計稿上面是12px，可是在手機上的實際大小是6px！

其它

還有另一個很重要的度量單位，vh和vw，之前因爲兼容性太差而不太適用，如今逐漸步入時代舞臺，好比網易新聞的css裏面就有下面這樣一段代碼。（目前vh和vw的適配方案還不成熟，等成熟了我再來記錄。）

@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}
@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}