之前寫過一篇移動端font-size適配方案，但是在實踐過程中，還是發現當時的思維太侷限了，視野太窄了，所以現在補充更新一下，記錄下來，供以後開發時參考，相信對其他人也有用。
這篇博文參考了移動端適配方案(下)。
有多種適配方案：
百分比布局：高度和寬度用百分比。由於高度和寬度的百分比是按照父元素尺寸的，所以改動父元素會使子元素發生變化，非常難以維護。
px布局：固定寬度，viewport縮放。就是全部用px，然後用js控制initial-scale的縮放比例。這樣在不同螢幕上面，頁面都會按比例整體縮放，也比較方便維護。
rem布局：rem做度量單位，改font-size。
需要注意的是，如果只實現頁面整體放大縮小的話，方法1和方法2的效果是一樣的！！！
我之前說，我們的適配目的是：對於不同的螢幕，頁面只需要簡單地放大或縮小即可。對於這個目的，上面的方法2和3都能達到效果。
但是，人類發明更寬的裝置，並不只是想看到更寬的字型或者更大的頁面，而是想看到更漂亮的布局內容。而這才是響應式的精髓：根據不同大小的螢幕展現不同的內容給別人看！
所以從這一方面來看，方法2是遠遠不夠的，所以我們需要方法3，優點有2個：
可以結合rem和px實現部分內容大小不變！
可以用rem響應式的為不同大小的螢幕展現不同的布局！
目前我只了解到了方法3這個程度，方法3有個侷限性，就是對dpr不能很好地適配，所以以後如果有更好的相容dpr的適配方案，我再記下來。
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...
移動端適配方案
尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...