REM互換適応ソリューション
REM互換適応ソリューション
REMとは
REM(ルート要素のフォントサイズ)とは、ルート要素に対する相対的なフォントサイズの単位を指します。
例:
- ルートノード
font-size
が10px
に設定されている場合、3rem
を使用すると、計算は < code>3 *10 = 30px - 如果根节点设置为
20px
,侧计算后得3*20 = 60px
font-size
设置为 10px
,则使用 3rem
时,计算后得 3*10 = 30px
为什么使用 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
ルートノードが 20px
に設定されている場合、計算後、 3*20 = 60px
>
フロー レイアウト
、レスポンシブ レイアウト
、その他の適応方法と比較して、REM適応
はより柔軟で、さまざまな画面サイズのルート ノードに応じて比例的に調整されます🎜優れた互換性 (Android 2.1 以降 / iOS 4.1 以降)🎜 px -> から使いやすいli> code> ワークフローを使用して自動的に完了できます
🎜🎜🎜tmt-workflow ベンチマーク値の規則🎜🎜<html>
ルート ノードのデフォルトfont-size
= 20px
🎜ビジュアル原稿のデフォルトの幅は 375px
(つまり iPhone 6 サイズ) です 🎜その他の画面幅はiPhone 6のビジョンをベンチマークとし、プロポーショナルスケーリングを行う🎜rem 単位の有効範囲は1px
🎜🎜🎜tmt-workflow REM スキームの使用アイデア🎜🎜コーディング プロセスの単位として px
を使用します🎜ワークフローがコンパイルされたら、px
- >>rem
自動完了🎜 lib-rem.less を呼び出して画面比率調整設定を実行します ol>🎜🎜🎜REMをオンにしてください🎜🎜まず、設定ファイル.tmtworkflowrc
を次のように編集します: 🎜🎜{ "supportREM": true}🎜
再度、プロジェクトのLESSエクスポートファイルにlib-rem.lessを導入します
処理詳細
開いた後、CSSはoutline style
とinline style
の2つに分かれていますロジック実行の部分: 外联样式
和 内联样式
两部分逻辑执行:
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
Less -> CSS
プロセス、プラグイン postcssPxtorem は LESS でpx
の単位変換を実行しますHTML/EJS -> HTML
プロセスでは、プラグイン posthtmlPx2rem を使用して HTML のインライン スタイル
の単位を変換します。
1. 1px問題との互換性
rem
、1pxに変換する際に小数点バグがあることを考慮してください。
変換では無視されます。最小変換値は 2px
です。 🎜参照: postcss-pxtorem オプション:minPixelValue🎜 参照: posthtmlPx2rem オプション:minPixelValue🎜🎜🎜2. スプライト画像の互換性の問題
🎜 スプライト画像の小数点計算のバグを回避するには、スプライト画像の各要素間のギャップは4px
です。_tasks/TaskBuildDist.js🎜🎜🎜3 を参照してください。REM
🎜 の予約されたハックを強制的に使用しないようにします。特定のCSS< が必要です。 /code> スタイルは単位変換を実行しません。大文字と小文字を区別する次の px
記述方法を使用できます: 🎜🎜例: 12PX
プロキシ 12px
、これは機能します この CSS
属性はフローでは無視され、単位変換は実行されません🎜🎜🎜🎜🎜🎜🎜🎜