媒体查询是响应式布局最稳妥轻量的解法，推荐在单CSS中用max-width断点（如767px）覆盖移动端样式，或通过link的media属性按需加载PC/移动CSS文件。

直接用媒体查询拆分样式是最稳妥、最轻量的解法，不需要额外框架或运行时判断，浏览器原生支持，兼容性好，维护也清晰。

用 @media 写在同一个 CSS 文件里

这是最常用的方式：把 PC 和移动端样式写在同一份 CSS 中，靠媒体查询自动切换。

• 默认写 PC 端样式（宽屏优先），再用 @media (max-width: 767px) 包裹移动端适配规则
• 断点建议参考主流设备：768px（平板横屏）、480px 或 375px（手机窄屏）
• 注意书写顺序：max-width 规则要放在默认样式之后，否则可能被覆盖
• 示例：
  @media (max-width: 767px) { .header { flex-direction: column; } .sidebar { display: none; } }

用 按条件加载不同 CSS 文件

适合样式差异大、模块完全独立的项目，能减少单个文件体积，提升首屏加载效率。

• 在 HTML 中通过 media 属性控制引入时机
  
  
• 两个文件互不干扰，无样式冲突风险
• 需确保 已正确设置，否则移动端可能无法触发 max-width 判断

避免 hover 在移动端“误触发”

PC 的 :hover 在触摸设备上容易产生延迟或意外响应，需做针对性处理。

• 用 @media (hover: hover) and (pointer: fine) 限定仅高精度指针设备生效
• 对必须保留交互反馈的元素，补充 :active 样式作为移动端 fallback
• 不要依赖纯 CSS 的 hover 实现核心功能（比如下拉菜单），应配合 JS 控制显隐逻辑

Vue 项目中动态 class 切换（辅助手段）

当需要更精细控制（如组件级响应、动画触发时机），可结合 JS 判断设备类型再绑定 class。

• 在 mixin 或 Composition API 中监听 window.innerWidth 变化，设置响应式 flag
• 模板中用 :class="{ 'is-mobile': isMobile, 'is-pc': !isMobile }" 分离样式作用域
• 注意：仅用于逻辑强耦合场景，日常布局适配仍推荐纯 CSS 媒体查询