watchEffect 本身不直接处理多端适配样式切换，它通过追踪响应式设备状态（如 useWindowSize 的 width/height）并动态更新 CSS 变量或 class 来实现自动适配，结合 computed 推导设备类型，无需手动判断。
watchEffect 本身不直接处理多端适配样式切换，它负责自动追踪响应式状态变化并触发副作用。真正实现多端适配样式的自动切换，是靠 把设备或视口状态变成响应式数据，再用 watchEffect 监听它、动态更新 CSS 变量或 class——整个过程无需手动判断、无重复逻辑、响应及时。
监听窗口尺寸变化，驱动主题与布局适配
多端适配的核心是“尺寸感知”。VueUse 的 useWindowSize 返回的 width 和 height 是 ref，天然可被 watchEffect 追踪：
- 定义断点（如移动端 ≤768px，平板 769–1024px，桌面 ≥1025px）
- 在 setup 中用
computed推导当前设备类型：const device = computed(() => width.value - 用 watchEffect 监听 device，同步设置根节点 class 和 CSS 变量：
watchEffect(() => {<br> document.documentElement.className = `device-${device.value}`;<br> document.documentElement.style.setProperty('--gap-base', device.value === 'mobile' ? '8px' : '16px');<br>})
结合 CSS 变量实现样式层的条件渲染
CSS 变量不是万能的，但配合级联和回退值，能让同一套组件在不同设备下呈现合理样式：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 在
:root预设基础变量：--sidebar-width: 240px; --header-height: 60px; - 在
.device-mobile :root或媒体查询中覆盖：.device-mobile :root { --sidebar-width: 0; --header-height: 48px; } - 组件内直接使用：
width: var(--sidebar-width); height: var(--header-height, 60px); - 关键点：变量必须作用在能被继承的节点（推荐
:root），且组件样式要显式调用var()
按需注入设备专属 class，控制复杂样式行为
有些样式无法单靠 CSS 变量完成（比如 SVG 图标颜色、阴影强度、动画时长），这时用 class 切换更直接可靠：
立即学习“前端免费学习笔记（深入）”；
- watchEffect 中统一管理 DOM class：
document.documentElement.className = ['theme-dark', `device-${device.value}`].join(' ') - 写针对性 CSS 规则：
.device-mobile .nav-item { padding: 0 12px; font-size: 14px; }<br>.device-desktop .nav-item { padding: 0 20px; font-size: 16px; } - 避免硬编码多个 media query，把逻辑收口到响应式状态 + watchEffect，维护成本更低
补充：服务端渲染（SSR）兼容要点
如果项目跑在 Nuxt 等 SSR 环境，window 和 document 在服务端不可用：
- 所有 DOM 操作必须包裹
if (typeof document !== 'undefined') - 首次挂载时，可用
onMounted初始化一次设备类，之后由 watchEffect 接管后续变更 - 注意：
useWindowSize内部已做 SSR 安全处理，可放心使用
