媒体查询是响应式布局最稳妥轻量的解法，推荐在单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; } }
用
适合样式差异大、模块完全独立的项目，能减少单个文件体积，提升首屏加载效率。
- 在 HTML 中通过
media属性控制引入时机
css" media="screen and (min-width: 768px)">
- 两个文件互不干扰，无样式冲突风险
- 需确保
已正确设置，否则移动端可能无法触发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 媒体查询
