移動端font-size適配方案(續)

概述

以前寫過一篇移動端font-size適配方案，可是在實踐過程當中，仍是發現當時的思惟太侷限了，視野太窄了，因此如今補充更新一下，記錄下來，供之後開發時參考，相信對其餘人也有用。

我上一篇博文主要有2個誤區，下面我一一記下來。

這篇博文參考了移動端適配方案(下)。

適配方案

有多種適配方案：

1. 百分比佈局：高度和寬度用百分比。因爲高度和寬度的百分比是按照父元素尺寸的，因此改動父元素會使子元素髮生變化，很是難以維護。
2. px佈局：固定寬度，viewport縮放。就是所有用px，而後用js控制initial-scale的縮放比例。這樣在不一樣屏幕上面，頁面都會按比例總體縮放，也比較方便維護。
3. rem佈局：rem作度量單位，改font-size。

須要注意的是，若是隻實現頁面總體放大縮小的話，方法1和方法2的效果是同樣的！！！

適配目的

我以前說，咱們的適配目的是：對於不一樣的屏幕，頁面只須要簡單地放大或縮小便可。對於這個目的，上面的方法2和3都能達到效果。

可是，人類發明更寬的設備，並不僅是想看到更寬的字體或者更大的頁面，而是想看到更漂亮的佈局內容。而這纔是響應式的精髓：根據不一樣大小的屏幕展示不一樣的內容給別人看！

因此從這一方面來看，方法2是遠遠不夠的，因此咱們須要方法3，優勢有2個：

1. 能夠結合rem和px實現部份內容大小不變！
2. 能夠用rem響應式的爲不一樣大小的屏幕展示不一樣的佈局！

目前我只瞭解到了方法3這個程度，方法3有個侷限性，就是對dpr不能很好地適配，因此之後若是有更好的兼容dpr的適配方案，我再記下來。