移动端与桌面端自适应布局应采用移动优先策略，用min-width媒体查询向上增强，基础样式使用流式布局，桌面端仅叠加必要结构属性，避免视觉样式重复和定位错误。
移动端与桌面端自适应布局，核心不是“写两套样式”，而是用 @media 控制“何时增强”，默认只写移动端基础样式，桌面端仅叠加必要调整。
为什么必须用 min-width 而不是 max-width
用 max-width 是“桌面优先→降级适配”，容易漏重置、样式打架、维护成本高；min-width 是移动优先→向上增强，逻辑更干净。比如你给 .sidebar 设了 position: absolute，在小屏上它会错位——这不是媒体查询没生效，而是你本不该在默认样式里写它。
- 默认 CSS 中所有元素应使用流式布局（
display: block、width: 100%、position: static） - 桌面增强只在
@media (min-width: 768px)或@media (min-width: 1024px)内添加float、grid、absolute等破坏流的属性 - 断点值建议按内容定：768px（平板横屏）、992px（窄桌面）、1200px（宽屏），而非死守 iPhone 宽度
@media 里该放什么？不该放什么？
媒体查询不是“重写一遍样式”，而是精准干预。常见错误是把整个组件样式都复制进去，导致重复和冲突。
- ✅ 应该放：仅影响布局结构的属性，如
display、grid-template-columns、flex-direction、width、margin-left、position - ❌ 不该放：字体大小、颜色、内边距等视觉微调——这些应在基础样式中用相对单位（
rem、%）处理，或另设独立断点 - ⚠️ 特别注意：不要在
@media里写position: static去“取消”绝对定位——它本就不该出现在默认样式里
如何避免多列布局在小屏上溢出或换行错乱
三列卡片、双栏文章这类布局，在移动端必须回归单列，否则用户得左右拖拽。关键不是靠 float 或 inline-block，而是用现代布局控制流。
立即学习“前端免费学习笔记（深入）”；
- 基础样式中，对多列容器统一设
display: block和width: 100% - 桌面端用
@media (min-width: 992px)启用display: grid，例如：grid-template-columns: 1fr 300px - 若用 Flexbox，确保子项不设固定
width，改用flex: 1或flex-basis配合min-width - 加
box-sizing: border-box到所有元素，避免 padding/border 导致宽度超限
实际项目中容易被忽略的三个细节
很多布局在开发时看着正常，上线后在真机或不同浏览器里出问题，往往卡在这几个点上。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且无拼写错误，否则 iOS Safari 会强制缩放 - CSS 自定义属性（如
--breakpoint-desktop: 1024px）可在媒体查询中直接使用，但需确认构建工具支持（Vite 默认支持，Webpack 需插件） - 用 JavaScript 动态读取
matchMedia或useMediaQuery（如 VueUse）时，监听的是 CSS 断点，不是设备类型——别用(max-width: 480px)判定“是不是手机”，它只是当前视口宽度
