html移动端适配方案rem

为了作到一次开发的网页可以在不一样尺寸的移动端设备上适配，咱们须要使设计稿上标注的固定尺寸在不一样设备上按照设备大小的比例显示不一样的尺寸。

好比设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头部导航条的高度是75px。

那么在 IPhone6 的手机上导航条显示的高度就是75px，在640px像素的手机上显示的高度就应该是(640/750) * 75 = 64px,以此类推，在不一样像素手机上元素的大小就是(实际设备大小/设计稿大小)*设计稿上该元素的大小。

而在实际开发中，咱们不可能经过这样的计算来设计每个元素的宽高，由于代价太大。

那么既然一个元素在不一样设备上的大小比例等于不一样设备之间的比例，显然这里咱们须要一个变量，这个变量与设备大小相关，是根据不一样设备计算出来的不一样的值，元素实际大小 = 一个常量 * 该变量。

常量天然取得是设计稿中的大小，那么答案呼之欲出，变量用的就是css新特性中的REM值，这个属性自己就是一个变量

固然设计rem值的核心就是经过js来根据设备的大小，按照公式计算出html的font-size值

这里介绍两种作法：

• 淘宝作法

  把rem值设为设备大小/10，好比750px的rem=75px;640px的rem=64px,那么设计稿（750px）中一个75px的元素用rem表示就是1rem，由此能够作到在640设备里显示是64px。因此在根据750px的设计稿编写css时，元素的大小就是（设计稿标注大小 / 75(设计稿的rem值)）+ 'rem'

  可是这种方法的缺点就是有时结果是十分复杂的小数，不便计算

• 网易作法

  接着上述淘宝描述，为了方便计算，咱们如今不想让元素的大小还须要除以75这个750px中的rem值，而是想让750px中的rem值是1，也就是说750px设计稿中的rem计算为(750 / 750) = 1,那么固然为了保证别的设备中的rem值可以和750px中的rem值拥有原有的比例关系（也就是实际设备大小 / 设计稿大小），就须要这样计算设备的rem值：(设备大小 / 750)。

  如此，就能够在设计元素的大小直接使用设计稿中的大小，可是单位要换为rem。

总结：这两种方案十分相似，只是在计算的方法上有所不一样，可是最为最为关键的要点就是保证不一样设备rem值之间的比例等于设备大小的比例，如此才能保证元素在使用rem做为单位时也保有相同的比例，从而作到真正的适配方案。

参考文章：http://www.cnblogs.com/well-nice/p/5509589.html