用途:统一 font-size 选用 rem 还是 px 的判断标准,核心目标是兼容 Chrome 的文字放大功能,并只把真正从属于文字尺寸的值改为相对单位。断点与视口响应式判断交给 ../kf-g-css-tak-responsive-rules/SKILL.md,本技能只处理文字与文字依赖尺寸。
主要能力:判断哪些 font-size 用 rem;判断何时用 em(以元素自身字号为基准,如段落间距 1 文字、按钮 padding 1.5 文字)与 ch(以数字或近似等宽字数为基准,如数字列表预留 3 位宽);判断 padding、gap、inline-size、block-size 等是否应随文字放大;审查 rem 批量转换、:root font-size hack、62.5% 用法;识别 AI 生成 CSS 中“一律 rem”的写法。
必要用法:先以 px 为基准,除非“以什么为基准”明确才用相对值。采用 rem 时须实际把 Chrome 文字放大开到极大验证:文字可读、不被裁剪、可操作。px 转 rem 用 calc() 保留来源,可用 CSS 标准转换辅助:@property --root-font-size 定义 16px,:root 中 --to-rem: calc(tan(atan2(1px, var(--root-font-size))) * 1rem),再用 calc(24 * var(--to-rem))。
限制与禁止:不得只把 font-size 改 rem 而把周边文字依赖尺寸留在 px;不得把无文字基准意义的值一律 rem;不得用 :root font-size hack 做流式布局;不得把断点设计带入本技能;不要自建 Sass rem() 函数,避免与 CSS 标准 rem() 名称冲突。固定高度、overflow: clip 等裁剪会破坏文字放大后的可读性,如 .anti-pattern 所示。需保留 px 时应说明相对基准为何不成立。
适用场景:评审 rem/px 选型、Chrome 文字放大支持程度与验证范围、文字放大下间距尺寸追从、em/ch 与 px 的取舍。限制为需配套验证流程与固定职责分工,避免把文字放大与页面整体缩放混同。具体参考资料的访问方式与更多示例暂未提供。