HTML本身不支持模块化比例，所谓“HTML模块化比例”实为设计系统中通过CSS自定义属性（如--scale-1、--scale-2）定义的字号/间距等数值序列，需手动约定或JS辅助实现；HTML仅承载语义结构，无法解析scale="1.25"等非标准属性，也无内置缩放计算能力。
HTML 本身不支持“模块化比例”这个概念——它没有内置的 modular scale（模块化比例）系统，也没有类似 CSS 中 clamp() 或设计系统里定义的 scale 函数。所谓“HTML 模块化比例”，实际是前端设计系统中对字号、间距、容器尺寸等进行数学化缩放的约定，必须靠 CSS + 手动约定或 JS 辅助实现，HTML 只负责承载语义结构。
为什么不能在 HTML 标签里写 scale="1.25" 这类属性
浏览器不识别这类自定义比例属性，scale 不是 HTML 标准属性，加了也无效。有人误以为给 <div class="card"> 加个 data-scale="1.5" 就能自动缩放样式，但其实这只是个标记，后续必须由 CSS 或 JS 主动读取并转换成具体值（比如计算 font-size: calc(1rem * 1.5)）。常见错误是只加了 data 属性，却没配对应的样式规则或脚本逻辑。
更危险的是混淆概念：把响应式缩放（如用 transform: scale() 缩放整个 <body>）当成模块化比例——前者破坏布局流、影响定位和点击区域，后者是设计系统中可预测、可组合的数值关系。
CSS 中怎么真正落地 modular scale
核心是定义一组有固定比值的数值序列（比如基于黄金比 φ ≈ 1.618，或双倍步进 1, 2, 4, 8），然后用 CSS 自定义属性统一管理：
立即学习“前端免费学习笔记（深入）”；
html {
--scale-1: 0.625rem; /* 10px */
--scale-2: 1rem; /* 16px */
--scale-3: 1.6rem; /* 25.6px */
--scale-4: 2.56rem; /* 40.96px */
}
h1 { font-size: var(--scale-4); }
p { font-size: var(--scale-2); }
.section { margin-block: var(--scale-3); }这样做的好处：
- 所有尺寸都来自同一套比例，视觉节奏一致
- 改一个基础值（如
--scale-1），整套尺寸自动重算 - 避免魔法数字，比如不再写
margin: 1.333rem这种难维护的值
注意：CSS 不支持运行时计算比例（如 calc(var(--base) * 1.25) 只能用于简单乘除，不能递归生成序列），所以比例值需手动定义或由构建工具生成。
JS 动态应用 modular scale 的典型场景
当需要根据用户偏好、设备类型或 A/B 测试动态切换比例基准时，JS 是必要补充。例如：
- 读取用户设置的字体大小偏好，调整
document.documentElement.style.setProperty('--scale-base', '1.2rem') - 在组件初始化时，根据父容器宽度选择对应 scale 级别：
const level = width > 1200 ? 4 : width > 768 ? 3 : 2;，再设置el.style.fontSize = `var(--scale-${level})` - 配合
ResizeObserver监听容器变化，实时更新内部元素的 scale 值
容易踩的坑：
- 直接在内联
style里写font-size: calc(1rem * 1.618)—— 多数浏览器不支持小数乘法（calc(1rem * 1.618)会解析失败） - 用 JS 修改
style.fontSize时传入字符串"var(--scale-3)"，但忘了该属性必须在 CSS 中已定义，否则 fallback 为默认值 - 在 Web Components 的 Shadow DOM 中使用自定义属性，却没在
:host或::slotted中透传或重定义
别把 <iframe> 当成模块化比例方案
有人试图用 <iframe src="header.html"> 实现“模块化”，再配合 transform: scale(0.8) 统一缩放子页面——这会导致严重问题：
- iframe 内容与主页面无法共享 CSS 自定义属性，比例系统断裂
- 缩放后 iframe 内部的
1em、100vh等相对单位行为异常 - 焦点、滚动、无障碍 API 全部失效或错位
- 现代浏览器对跨域 iframe 的
transform有额外安全限制
真正可行的模块复用，是用 <template> + JS 克隆注入，或 Web Components + customElements.define()，它们能继承宿主页面的 CSS 上下文，让 modular scale 生效。
最常被忽略的一点：modular scale 不是万能的。字号可以按比例缩放，但图标大小、阴影扩散值、border-radius 的视觉权重并不遵循相同曲线。硬套同一套比例，反而破坏一致性。得根据设计意图分层定义——字号用 scale，间距用 spacing scale，圆角用 discrete steps（如 4px / 8px / 12px），这才是实际项目里能跑通的模块化比例。
