移动端紧凑模式需用css自定义属性统一控制：在:root定义两套变量值，通过@media或[data-compact]切换，确保字体、间距、按钮热区、图标尺寸等所有密度参数联动响应，避免点击不准、视觉割裂。
移动端紧凑模式不能只靠媒体查询
纯靠 @media 切换字体、行高、内边距，容易漏掉按钮热区、图标尺寸、间距断层这些细节，最后变成“看起来小了，但点不准、读不清、挤成一团”。真正可控的一键切换，得把所有可变参数收归到 CSS 自定义属性（-- 变量）里，再用一个开关统一控制。
:root 里定义两套变量值
别在每个选择器里重复写 font-size: 14px 或 padding: 8px 12px，而是提前在 :root 中定义基础变量，并为紧凑模式提供覆盖值：
:root {
--text-sm: 16px;
--space-xs: 8px;
--space-s: 12px;
--space-m: 16px;
--btn-height: 44px;
--icon-size: 20px;
}
@media (max-width: 768px) {
:root {
--text-sm: 14px;
--space-xs: 6px;
--space-s: 8px;
--space-m: 12px;
--btn-height: 36px;
--icon-size: 16px;
}
}
这样所有用到 var(--text-sm) 的地方都会自动响应变化，无需改 HTML 或 JS。
用 [data-compact] 属性实现手动开关
如果想让用户自己点一下切换（比如设置页的“启用紧凑模式”开关），就别绑定媒体查询，改用 HTML 属性驱动：
- 给
或加一个data-compact属性： - 在 CSS 中用属性选择器覆盖变量：
html[data-compact] { --text-sm: 14px; --btn-height: 36px; ... } - JS 控制只需一行：
document.documentElement.toggleAttribute('data-compact') - 注意：不要用
class="compact"，因为 class 优先级容易被其他样式覆盖；data-属性 +:root变量组合更稳定
按钮热区和图标必须同步缩放
最容易被忽略的是点击体验——字体变小了，但按钮还是 44px 高，手指点起来空荡荡；或者图标缩了，但周围留白没减，视觉上反而更松散。所以变量必须成组管理：
-
--btn-height和--btn-padding-y要联动，确保内容垂直居中 -
--icon-size必须配--icon-margin，否则小图标+大外边距会割裂布局 - 所有
gap、margin、padding都得用变量，不能混用固定值 - 用
min-height: var(--btn-height)替代height，防止文字撑高后失真
紧凑模式不是“所有东西砍一刀”，而是整套空间节奏重排；变量只是工具，关键是你是否把所有影响密度的参数都纳入了同一套控制体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
