Penyelesaian Penyesuaian Serasi REM


REM Penyelesaian Penyesuaian Serasi

Apakah itu REM

REM (Saiz fon unsur akar) merujuk kepada unit saiz fon berbanding unsur akar.

Contoh:

  • Jika nod akar font-size ditetapkan kepada 10px, maka apabila menggunakan 3rem, pengiraan akan menjadi < kod>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

首先，编辑配置文件 .tmtworkflowrcJika nod akar ditetapkan kepada 20px, selepas pengiraan, 3*20 = 60px

Mengapa menggunakan REM🎜🎜🎜Berbanding dengan susun atur aliran, susun atur responsif dan kaedah penyesuaian lain, penyesuaian REM ialah lebih fleksibel , disesuaikan secara berkadar mengikut nod akar pada saiz skrin yang berbeza🎜Keserasian yang baik (Android 2.1+ / iOS 4.1+)🎜Mudah digunakan, daripada px -> li> code> Boleh dilengkapkan secara automatik menggunakan aliran kerja
🎜🎜🎜tmt-workflow nilai tanda aras konvensyen🎜
    🎜<html> Lalai nod akar font-size = 20px🎜Lebar lalai manuskrip visual ialah 375px (iaitu saiz iPhone 6) 🎜Lebar skrin lain ialah Visi iPhone 6 digunakan sebagai penanda aras dan penskalaan berkadar dilakukan🎜rem Julat efektif unit ialah nilai atribut CSS bagi semua gaya sebaris dan luaran, kecuali 1px
🎜🎜🎜tmt-workflow idea penggunaan skema REM🎜
    🎜Gunakan px sebagai unit dalam proses pengekodan🎜Selepas aliran kerja disusun, px - > rem Penyiapan automatik🎜Panggil lib-rem.less untuk melaksanakan tetapan penyesuaian nisbah skrin🎜🎜🎜Hidupkan REM🎜🎜Mula-mula, edit fail konfigurasi .tmtworkflowrc adalah seperti berikut: 🎜🎜
    {  "supportREM": true}
    🎜

    Sekali lagi, perkenalkan lib-rem.less dalam fail eksport LESS

    Butiran proses

    Selepas dihidupkan, CSS dibahagikan kepada gaya garisan dan gaya sebaris Dua bahagian pelaksanaan logik: 外联样式 和 内联样式 两部分逻辑执行：

    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. Kurang -> CSS proses, pemalam postcssPxtorem melakukan penukaran unit pada px dalam LESS

      2. Proses
    2. HTML/EJS -> HTML, pemalam posthtmlPx2rem akan digunakan untuk menukar unit gaya sebaris dalam HTML

      3. Mata lain yang perlu diperhatikan
1 Serasi dengan isu 1px
Memandangkan akan terdapat pepijat perpuluhan apabila menukar 1px kepada rem, 1px penukaran, nilai penukaran minimum ialah 2px. 🎜Lihat: pilihan postcss-pxtorem:minPixelValue🎜Lihat: posthtmlPx2rem option:minPixelValue🎜
🎜🎜2 Isu keserasian imej Sprite
🎜Untuk mengelakkan pepijat pengiraan perpuluhan dalam imej sprite, tetapkan nilai imej sprite. setiap elemen dalam imej sprite Jurang antara mereka ialah 4px, lihat _tasks/TaskBuildDist.js🎜
🎜🎜3 Paksa untuk tidak menggunakan hack reserved REM
🎜Jika anda mahukan gaya CSS< The /code> tertentu tidak melakukan penukaran unit Anda boleh menggunakan kaedah penulisan px yang sensitif huruf besar dan kecil: 🎜🎜Contohnya: 12PX proksi 12px, ini berfungsi Atribut CSS ini akan diabaikan dalam aliran dan penukaran unit tidak akan dilakukan🎜🎜🎜🎜🎜🎜🎜🎜