REM互換適応ソリューション


REM互換適応ソリューション

REMとは

REM(ルート要素のフォントサイズ)とは、ルート要素に対する相対的なフォントサイズの単位を指します。

例:

  • ルートノード font-size10px に設定されている場合、3rem を使用すると、計算は < code>3 *10 = 30px
  • 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ルートノードが 20px に設定されている場合、計算後、 3*20 = 60px >

REM を使用する理由🎜🎜🎜フロー レイアウトレスポンシブ レイアウト、その他の適応方法と比較して、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 を呼び出して画面比率調整設定を実行します🎜🎜🎜REMをオンにしてください🎜🎜まず、設定ファイル.tmtworkflowrcを次のように編集します: 🎜🎜
    {  "supportREM": true}
    🎜

    再度、プロジェクトのLESSエクスポートファイルにlib-rem.lessを導入します

    処理詳細

    開いた後、CSSはoutline styleinline styleの2つに分かれていますロジック実行の部分: 外联样式 和 内联样式 两部分逻辑执行:

    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

    1. Less -> CSS プロセス、プラグイン postcssPxtorem は LESS で px の単位変換を実行します

    2. HTML/EJS -> HTML プロセスでは、プラグイン posthtmlPx2rem を使用して HTML の インライン スタイル の単位を変換します。

    その他の注意点
1. 1px問題との互換性
1pxをrem1pxに変換する際に小数点バグがあることを考慮してください。 変換では無視されます。最小変換値は 2px です。 🎜参照: postcss-pxtorem オプション:minPixelValue🎜 参照: posthtmlPx2rem オプション:minPixelValue🎜
🎜🎜2. スプライト画像の互換性の問題
🎜 スプライト画像の小数点計算のバグを回避するには、スプライト画像の各要素間のギャップは 4px です。_tasks/TaskBuildDist.js🎜
🎜🎜3 を参照してください。REM
🎜 の予約されたハックを強制的に使用しないようにします。特定の CSS< が必要です。 /code> スタイルは単位変換を実行しません。大文字と小文字を区別する次の px 記述方法を使用できます: 🎜🎜例: 12PX プロキシ 12px、これは機能します この CSS 属性はフローでは無視され、単位変換は実行されません🎜🎜🎜🎜🎜🎜🎜🎜