viewport meta标签缺失或错误是响应式失效的首要原因，必须置于head内且仅一次；容器应使用max-width而非width:100%；断点需严格对齐设计稿；图片须设max-width:100%。
viewport meta 标签漏写或写错，页面在手机上直接“缩成一团”
几乎所有响应式失效的首因就是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没加，或加在了 里、拼错成 viewprot、写了两个重复标签导致冲突。
这个标签必须放在 内，且只能出现一次。它不是可选的“优化项”，而是告诉浏览器“别按桌面宽度渲染，按真实设备宽度来”。没有它，@media 规则基本无效。
- 错误写法：
<meta name="viewport" content="width=320">（硬编码宽度，失去自适应） - 常见陷阱：用构建工具自动注入时覆盖了手动写的，或模板中已有但被注释掉了
- 验证方式：在 Chrome DevTools 切换 iPhone 模拟器，检查 Elements 面板里
是否存在且内容正确
容器宽度用 width: 100% 而不是 max-width，大屏下文字挤成窄条
纯百分比布局（如 width: 100%）在桌面端会无限撑满，导致段落过宽、阅读体验差。真正需要的是“弹性但有上限”的容器，也就是 max-width + margin: 0 auto 组合。
例如首页主体区域，推荐这样写：
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
-
max-width控制最大宽度，避免大屏溢出 -
width: 100%确保小屏下占满可用空间 -
padding替代固定margin，适配不同屏幕边距 - 别用
min-width锁死最小尺寸——它会阻止小屏收缩，引发横向滚动
媒体查询断点没对齐设计稿，PC 和平板之间出现“悬空空白”
断点不是随便设的。如果设计稿给的是 768px、1024px、1440px，就别用 Bootstrap 的 768/992/1200。错位 1px 都可能导致某一级布局突然崩掉，比如导航栏在 1023px 还是横排，到 1024px 就跳成竖排，中间卡在奇怪状态。
更稳妥的做法是“移动优先 + min-width 断点”，并统一管理：
/* 基础样式：小屏 */
.header { display: flex; flex-direction: column; }
<p>/<em> 平板及以上 </em>/
@media (min-width: 768px) {
.header { flex-direction: row; }
}</p><p>/<em> 桌面及以上 </em>/
@media (min-width: 1024px) {
.header { justify-content: space-between; }
}</p>
- 避免混合使用
max-width和min-width在同一项目里，容易逻辑混乱 - 断点值建议取整、对齐设计系统，不要凭感觉写 753px 或 1019px
- 用
em断点虽更语义，但绝大多数团队用px更可控、易调试
图片没加 max-width: 100%，小屏上直接撑破容器
哪怕布局再完美，一张没约束的 <img src="banner.jpg"> 就能让整个首页在手机上横向滚动。这不是 bug，是 CSS 默认行为：图片按原始尺寸渲染。
最简方案就是全局重置：
img {
max-width: 100%;
height: auto;
}
- 这条规则必须写在所有其他样式之前，或用
!important确保不被覆盖（仅限紧急修复） - 背景图要用
background-size: cover或contain，不能只靠width控制 - 如果首页有轮播图或 banner 图，额外加
object-fit: cover配合固定容器高宽，防止拉伸变形
实际做首页时，最常被忽略的是断点与设计稿的像素级对齐，以及图片样式被局部 CSS 覆盖——这两处问题不会报错，但会让响应式效果“看起来差不多，实则处处别扭”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
