十、rem适配方案

十、rem适配方案

1.1 rem适配方案

1、让一些不能等比例自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比例缩放的适配。

苏宁手机端用的就是rem+媒体查询

苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！

1.2 rem实际开发适配方案

1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）

2、css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。

1.3 rem适配方案技术使用（市场主流）

技术方案1：

less

媒体查询

rem

技术方案2（推荐）

flexible.js

rem

技术方案1与技术方案2 原理是一样的，只是方式不同。

总结：

1、两种方案现在都存在。

2、方案2更简单，现阶段大家无需了解里面的js代码。

1.4 rem实