⒔ 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 属性,不进行单位转换

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.