REM 호환 적응 솔루션

REM이란

REM(루트 글꼴 크기 요소)는 루트 요소를 기준으로 한 글꼴 크기의 단위를 나타냅니다.

예:

루트 노드 font-size가 10px로 설정된 경우 < code >3rem, 계산 후 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 基准值约定

<html> 根节点默认 font-size = 20px
视觉稿默认宽度为 375px（即 iPhone 6 尺寸）
其它屏幕宽度以 iPhone 6 的视觉为为基准，进行等比缩放
rem 单位生效范围为所有内联、外联样式的 CSS 属性值，1px 除外

tmt-workflow REM 方案使用思路

编码过程中统一使用 px 作为单位
工作流编译后，px -> rem 自动完成
调用 lib-rem.less 进行个屏幕比例适配设置

开启 REM

首先，编辑配置文件 .tmtworkflowrc루트 노드가 20px로 설정된 경우, 이후 계산하면 < code>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 속성 값입니다.

#🎜🎜##🎜🎜##🎜🎜#tmt-workflow REM 구성표 사용 아이디어# 🎜🎜##🎜🎜#인코딩 과정에서 px 단위를 균일하게 사용#🎜🎜#워크플로가 컴파일된 후 px - > rem 자동 완성 #🎜🎜#lib-rem.less를 호출하여 화면 비율 적응 설정 수행
#🎜🎜##🎜🎜## 🎜🎜#REM 켜기#🎜🎜##🎜🎜#먼저 편집 .tmtworkflowrc 구성 파일은 다음과 같습니다. #🎜🎜##🎜🎜#{  "supportREM": true}
#🎜🎜# 다시 lib-rem.less를 소개합니다
프로세스 세부정보

열린 후 CSS 포인트 <에 대한 로직의 두 부분을 실행합니다. code>개요 스타일 및 인라인 스타일: 外联样式 和 内联样式 两部分逻辑执行：

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
HTML/EJS -> HTML의 px 변환 프로세스에서 플러그인 posthtmlPx2rem이 사용됩니다. 단위를 HTML의 인라인 스타일로

기타 참고 사항

#🎜🎜 ##🎜 🎜#1. 1px 문제와 호환

1px를 rem으로 변환할 때 소수점 버그가 있을 것을 고려하여 1px는 무시됩니다. 워크플로 변환의 경우 최소 변환 값은 2px입니다.

참조: postcss-pxtorem 옵션:minPixelValue

참조: posthtmlPx2rem 옵션:minPixelValue#🎜🎜#

#🎜🎜##🎜🎜#2. 스프라이트 호환성 문제

#🎜🎜 # 스프라이트 이미지의 소수 계산 버그를 방지하려면 스프라이트 이미지의 각 요소 사이의 간격을 4px로 설정하세요. _tasks/TaskBuildDist.js#🎜🎜#

#🎜🎜## 🎜🎜을 참조하세요. #3. REM을 사용하지 않도록 강제하는 예약된 해킹

#🎜🎜#특정 CSS 스타일에서 단위 변환을 수행하지 않으려면 다음과 같이 대소문자를 구분하는 를 사용할 수 있습니다. px 작성 방법: #🎜🎜##🎜🎜# 예: 12PX 프록시 12px이므로 이 CSS는 무시됩니다. 워크플로 > 속성에서 단위 변환이 없습니다.

REM 호환 적응 솔루션