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

標籤：html   issues   www.   不能   記錄   大小   實踐   .com   過程   

概述

之前寫過一篇移動端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的適配方案，我再記下來。

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