Solutions d'adaptation compatibles REM


Solution d'adaptation compatible REM

Qu'est-ce que REM

REM (Taille de police de l'élément racine) fait référence à l'unité de taille de police par rapport à l'élément racine.

Exemple :

  • Si le nœud racine font-size est défini sur 10px, alors lors de l'utilisation de 3rem, le calcul sera < 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

首先，编辑配置文件 .tmtworkflowrcSi le nœud racine est défini sur 20px, après calcul, 3*20 = 60px

Pourquoi utiliser REM🎜🎜🎜Par rapport à la disposition de flux, à la mise en page réactive et à d'autres méthodes d'adaptation, l'adaptation REM est plus flexible, adapté proportionnellement en fonction du nœud racine sur différentes tailles d'écran🎜Bonne compatibilité (Android 2.1+ / iOS 4.1+)🎜Facile à utiliser, à partir de px rem -> li> code> Peut être complété automatiquement à l'aide du workflow
🎜🎜🎜Convention des valeurs de référence du workflow tmt🎜
    🎜<html> Noeud racine par défaut font-size = 20px🎜La largeur par défaut du manuscrit visuel est 375px (c'est-à-dire la taille de l'iPhone 6) 🎜Les autres largeurs d'écran sont La vision de l'iPhone 6 est utilisée comme référence et la mise à l'échelle proportionnelle est effectuée🎜rem La plage effective de l'unité est la valeur de l'attribut CSS de tous les styles en ligne et externes, à l'exception de 1px
🎜🎜🎜Idées d'utilisation du schéma REM tmt-workflow🎜
    🎜Utilisez px comme unité dans le processus de codage🎜Après le workflow est compilé, px - > rem Achèvement automatique🎜Appelez lib-rem.less pour effectuer les paramètres d'adaptation du rapport d'écran
🎜🎜🎜Activez REM🎜🎜Tout d'abord, éditez le fichier de configuration .tmtworkflowrc comme suit : 🎜🎜
{  "supportREM": true}
🎜

Encore une fois, introduisez lib-rem.less dans le fichier d'exportation LESS du projet

Détails du processus

Après l'activation, CSS est divisé en style de contour et style en ligne Deux parties d'exécution logique : 外联样式 和 内联样式 两部分逻辑执行：

  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, le plug-in postcssPxtorem effectue la conversion d'unité sur px en LESS

    2. Processus
  2. HTML/EJS -> HTML, le plug-in posthtmlPx2rem sera utilisé pour convertir l'unité des styles en ligne en HTML

    3. Autres points à noter
1 Compatible avec le problème 1px
Considérant qu'il y aura un bug décimal lors de la conversion de 1px en rem, 1px conversion, la valeur de conversion minimale est 2px. 🎜Voir : option postcss-pxtorem :minPixelValue🎜Voir : option posthtmlPx2rem :minPixelValue🎜
🎜🎜2 Problèmes de compatibilité avec l'image Sprite
🎜Afin d'éviter le bug de calcul décimal dans l'image sprite, définissez la valeur de. chaque élément de l'image du sprite L'écart entre eux est 4px, voir _tasks/TaskBuildDist.js🎜
🎜🎜3 Forcez à ne pas utiliser le hack réservé de REM
🎜Si vous. voulez un certain CSS< Le style /code> n'effectue pas de conversion d'unité. Vous pouvez utiliser la méthode d'écriture px suivante, sensible à la casse : 🎜🎜Par exemple : 12PX proxy 12px, cela fonctionne. Cet attribut CSS sera ignoré dans le flux, et la conversion d'unité ne sera pas effectuée🎜🎜🎜🎜🎜🎜🎜🎜