rem适配方案

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 在设置中可以修改