看了宇哥關於移動端適配的分享後，加上目前公司專案也需要做移動端適配，今天就抽空搞了搞。目前業界還是比較推崇手淘使用「rem+viewport」的解決方案，今天自己模仿手淘flexible的解決方案，實現了個簡單的demo。
flexible動態獲取裝置寬度和dpr，為html元素新增兩個屬性：data-fontsize（裝置寬度／10），data-dpr（安卓均為1，ios不同裝置為2或3），同時設定meta標籤的scale（1/dpr）。你只需要為需要適配的元素設定rem，為字型設定px（需要考慮不同的dpr）。
手淘H5移動端適配方案flexible原始碼分析
移動端適配一直是乙個值得 的問題，在業餘時間我找了一些頁面，檢視了一些廠商對於移動端h5頁面的適配方案，看到了幾個典型的例子，今天就來記錄一下我看到的第乙個典型的例子，也是我們公司目前普通h5專案正在使用的適配方案。這個適配方案是lib flexible，在看這個原始碼的同時，我想先來回顧一下幾個概...
h5移動端適配
原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...
移動端h5優化
1 減少js載入體積 很多庫能用cdn的盡量使用cdn，這樣打包出來的js體積會很小，載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui，mintui等 4 儘量減少網路請求數量 程式中的資料，有的能乙個介面返回的盡量乙個介面返回，不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...