rem适配方案

适配的目标是什麼？

• 讓一些不能等比自适應的元素，達到當裝置尺寸發生變化的時候，等比例适配目前裝置
• 使用媒體查詢根據不同的裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸機關，當htnl字型大小發生變化元素的尺寸也會發生變化，進而達到等比例适配

rem适配方案技術使用

技術方案1

• less
• 媒體查詢
• rem

方案2（推薦）

• flexible.js
• rem

rem實際開發适配方案1

設計稿常鍵尺寸寬度

裝置	常見寬度
iphonex	750px
android	4.7-5 720

現在基本以750為準

元素大小取值方法

• 最後公式：頁面元素的rem值 = 頁面元素值(px) / (螢幕寬度 / 劃分的份數)
• 螢幕寬度/劃分的份數 就是html font-size字型的大小
• 或者頁面元素的rem值=頁面元素值(px) / html font-size字型的大小

rem實際開發适配方案2

flexible.js 下載下傳位址 flexible.js

• 高效簡潔的移動端适配庫
• 利用js(flexible.js)去算
• 預設将裝置劃分為10等份

px轉換rem插件vscode cssrem

這個插件預設 font-size=16px 在設定中可以修改