免费AI编程助手
REM 兼容适配解决方案
2018-11-15 16:55 更新
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 属性，不进行单位转换
以上内容是否对您有帮助：
更多建议：