必须用显式类名（如.theme-light/.theme-dark）覆盖媒体查询，仅JS修改:root变量无效，因@media声明优先级更高且不响应手动切换。
直接改:root变量就能切换排版风格？别跳过媒体查询的优先级规则
不能只靠 JS 修改 :root 变量就指望“一键切换”生效——媒体查询（如 @media (prefers-color-scheme: dark)）的声明会覆盖 JS 动态设置的变量值，除非你用更高优先级的类名强制接管。比如用户系统设为深色模式，但你想手动切回浅色，仅执行 document.documentElement.style.setProperty('--color-bg', '#fff') 是无效的，因为媒体查询里的 :root 块仍会重置它。
- 必须用显式类名（如
.theme-light/.theme-dark）配合!important或更具体的选择器覆盖媒体查询 - 媒体查询本身不响应 JS 修改，它只响应系统偏好或视口变化，所以“手动切换”本质是绕过媒体查询、用 class 控制
- 若想保留自动适配 + 手动覆盖双能力，建议结构为：
:root定义默认 + 媒体查询定义系统偏好 + 类名定义用户覆盖
@media (min-width: 768px) 里改字体大小，为什么手机上还是没变？
常见原因是没写“移动优先”的基础样式。媒体查询只在条件满足时生效，它不会撤销已定义的样式，只会叠加或覆盖。如果你只在 @media (min-width: 768px) 里写了 font-size: 18px，而没在默认（无媒体查询）下设 font-size: 16px，那小屏设备根本没拿到任何字体定义，可能回退到浏览器默认值（通常是 16px），看起来“没变”其实是没生效。
- 正确顺序：先写全局基础值（如
body { font-size: 16px; }），再用@media (min-width: 768px)覆盖为18px - 别用
max-width主逻辑，比如@media (max-width: 767px)容易因 iOS 缩放、横竖屏切换导致断点误触发 - 字体单位推荐用
rem，配合:root的font-size变量统一调控，比直接写px更易维护
用 CSS 变量控制行高、字重、字间距，哪些值适合响应式动态调整？
不是所有排版属性都适合随屏幕尺寸缩放。行高（line-height）和字间距（letter-spacing）对可读性影响大，且数值本身无单位依赖，最适合用变量驱动；字重（font-weight）一般保持固定（如 400/600），强行随尺寸变化反而破坏视觉节奏。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 推荐变量化：
--line-height-base: 1.5、--letter-spacing-body: 0.02em、--font-size-root: 16px - 避免变量化：
--font-weight-heading这类值，不同尺寸下通常不需要改变粗细，而是靠字号或 margin 调整层级 - 注意
em和rem在letter-spacing中的行为差异：用em会随当前字体缩放，用rem则始终相对于根字体，多数场景选em更自然
切换排版风格时，transition 动画为何失效？
CSS 变量本身**不触发 transition**，即使你给 body { transition: background-color .3s }，改 --color-bg 也不会动。真正能过渡的是使用该变量的属性（如 background-color: var(--color-bg)），但前提是这个属性本身支持过渡，且变量更新后该属性值确实发生了变化。
立即学习“前端免费学习笔记（深入）”；
- 确保目标属性被声明且可动画：颜色、opacity、transform、font-size（需用
rem或em）、line-height 都可以；但font-family、display、grid-template-columns不行 - 变量更新后，如果计算出的最终值没变（比如两个不同变量都指向
#fff），transition 也不会触发 - 调试技巧：临时把
var(--xxx)换成硬编码值（如#000→#fff），确认 transition 是否正常，再换回变量排查
