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 安全处理，可放心使用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！