媒体查询不覆盖默认样式，而是通过层叠规则让符合条件的样式生效；应采用mobile-first策略，以流式布局为起点，用min-width断点逐级增强，配合viewport声明和基础重置确保响应式正确实现。
媒体查询本身不“覆盖”默认样式，而是通过层叠规则让符合条件的样式生效。关键不是强行覆盖，而是让移动端默认样式简洁可靠，再用断点精准增强——错位问题往往源于默认样式已含定位、固定宽高或 margin，被大屏规则二次叠加导致偏移。
确保默认样式是移动友好的基础
错位常始于小屏下就用了 position: absolute 或 margin-left: 120px 这类依赖屏幕尺寸的值。正确做法是：所有元素默认采用自然流式布局，不设固定宽高、不写绝对定位、清空外边距。
- 把
.card { position: static; margin: 0; width: auto; }作为起点（static可省略，它是默认值） - 避免在通用选择器里写
body { margin: 20px; }—— 这会在所有设备上生效，小屏极易溢出 - 用
box-sizing: border-box统一盒模型，防止 padding 撑破宽度
用 min-width 断点逐级增强，而非 max-width 覆盖
推荐 mobile-first 策略：先写小屏样式，再用 @media (min-width: 768px) 添加平板及以上专属规则。这样能避免小屏意外继承大屏的定位或边距。
- 错误写法：
@media (max-width: 767px) { .card { margin: 0; } }—— 容易被后续规则覆盖，且逻辑反直觉 - 正确写法：
.card { margin: 0; } @media (min-width: 768px) { .card { position: absolute; left: 120px; top: 40px; width: 400px; } } - 断点数值别硬套机型，按内容表现定：文字换行难看、卡片太窄时才切
检查是否被更高优先级样式压住
写了 media 查询却没生效？大概率是 CSS 层叠顺序或特异性出了问题。
- 确认 media 规则写在默认样式之后——后声明的同级规则才会覆盖前声明的
- 避免在 media 内部用过于宽泛的选择器（如
div .card），它可能比默认的.card特异性更高，反而干扰预期 - 慎用
!important，它会破坏响应式逻辑；真要用，只加在 media 规则内部，且仅针对必须覆盖的属性
别忘了视口声明和基础重置
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，浏览器根本不会按设备真实宽度解析 media 查询——哪怕代码全对，也会在手机上按 980px 渲染，导致 max-width: 768px 永远不触发。
- 务必把 viewport 标签放在
最前面 - 开头加轻量重置：
* { margin: 0; padding: 0; box-sizing: border-box; }，消除浏览器默认边距干扰 - 旧版 Safari 或 Electron 中，显式写
@media screen and (min-width: 768px)，避免被当成@media all导致兼容异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
