⒔ REM 解决方案

littledu edited this page Mar 7, 2016 · 5 revisions

REM 兼容适配解决方案

什么是 REM

REM(Font size of the root element)是指相对于根元素的字体大小的单位。

范例:

  • 若根节点font-size设置为 10px,则使用 3rem 时,计算后得 3*10 = 30px
  • 如果根节点设置为 20px,侧计算后得 3*20 = 60px

为什么使用 REM

  • 相对于流布局响应式布局等适配方式,REM 适配更为灵活,在不同屏幕尺寸上根据根节点来等比适配
  • 兼容性好(Android 2.1+ / iOS 4.1+
  • 使用便捷,从 px -> rem 可以使用工作流自动完成

tmt-workflow 基准值约定

  1. <html> 根节点默认 font-size = 20px
  2. 视觉稿默认宽度为 375px(即 iPhone 6 尺寸)
  3. 其它屏幕宽度以 iPhone 6 的视觉为为基准,进行等比缩放
  4. rem 单位生效范围为所有内联、外联样式的 CSS 属性值,1px 除外

tmt-workflow REM 方案使用思路

  1. 编码过程中统一使用 px 作为单位
  2. 工作流编译后,px -> rem 自动完成
  3. 调用 lib-rem.less 进行个屏幕比例适配设置

开启 REM

首先,编辑配置文件 .tmtworkflowrc 如下:

{
  "supportREM": true
}

再次,在项目 LESS 出口文件中引入 lib-rem.less

流程详述

开启后,CSS 分为 外联样式内联样式 两部分逻辑执行:

  1. Less -> CSS 过程,由插件 postcssPxtorem 对 LESS 中的 px 进行单位转换
  2. HTML/EJS -> HTML 过程,会使用插件 posthtmlPx2rem 对 HTML 中的内联样式进行单位转换

其它注意点

1. 兼容 1px 问题

考虑到 1px 转换为 rem 会有小数bug,工作流中会忽略 1px 的转换,最小转换数值为 2px
参见:postcss-pxtorem option:minPixelValue
参见:posthtmlPx2rem option:minPixelValue

2. 雪碧图兼容问题

为避免雪碧图遇到小数计算 bug,设置雪碧图内各个元素之间的间隙为 4px,参见_tasks/TaskBuildDist.js

3. 强制不使用 REM 的预留 hack

如果希望某条 CSS样式不进行单位转换,可使用如下大小写敏感的 px 写法:

如:12PX 代理 12px,这样工作流中就会忽略这条 CSS 属性,不进行单位转换