WeFlow幫助文檔
/ REM 兼容适配解决方案
REM 兼容适配解决方案
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 基准值约定
<html>
根节点默认font-size
=20px
- 视觉稿默认宽度为
375px
(即 iPhone 6 尺寸) - 其它屏幕宽度以 iPhone 6 的视觉为为基准,进行等比缩放
- rem 单位生效范围为所有内联、外联样式的 CSS 属性值,
1px
除外
tmt-workflow REM 方案使用思路
- 编码过程中统一使用
px
作为单位 - 工作流编译后,
px
->rem
自动完成 - 调用 lib-rem.less 进行个屏幕比例适配设置
开启 REM
首先,编辑配置文件 .tmtworkflowrc
如下:
{ "supportREM": true}
再次,在项目 LESS 出口文件中引入 lib-rem.less
流程详述
开启后,CSS 分为 外联样式
和 内联样式
两部分逻辑执行:
Less -> CSS
过程,由插件 postcssPxtorem 对 LESS 中的px
进行单位转换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
属性,不进行单位转换