固定宽度导致手机页面挤成一团，因像素值如1200px远超手机375–414px屏幕，浏览器只能缩放或横向滚动；须改用相对单位、补全viewport标签、移动优先写媒体查询、约束图片iframe、保障点击区域≥44px。
为什么固定宽度会让页面在手机上挤成一团
因为写死了 width: 1200px 或 max-width: 1200px，而手机屏幕只有 375–414px 宽，浏览器只能强行缩小整个布局或横向滚动。这不是“变形”，是 CSS 拒绝适配的明确信号。
- 检查所有带具体像素值的
width、height、padding、margin，尤其是容器类（如.container、.wrapper） - 把固定像素换成相对单位：
width: 100%、max-width: 100%、padding: 1rem（而非padding: 16px） - 禁用
zoom、transform: scale()等视觉缩放手段——它们不改变布局流，只会让元素“糊”在一起
viewport meta 标签漏了会直接失效
没有它，移动端浏览器会按桌面宽度（通常是 980px）渲染页面，再缩放显示，导致文字小得看不清、点击区域错位。这是响应式起步就该确认的第一步。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 必须放在
<head>内，且不能被 JS 动态插入（部分安卓 WebView 不识别） - 不要加
user-scalable=no——它会锁死缩放，对视障用户不友好，也违反 WCAG 基本要求 - 如果用了
initial-scale=1.0但页面仍偏大/偏小，检查是否有其他 meta 标签重复声明 viewport
媒体查询不是“补丁”，要从设计源头介入
等页面写完再加 @media (max-width: 768px) 往往要推翻大量样式。真正有效的做法是：移动优先，先写小屏基础样式，再用 min-width 逐步增强。
@media (min-width: 768px) {
.header-nav {
display: flex;
}
.header-logo {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
- 避免在媒体查询里重复设置已定义的属性（比如小屏已设
display: block，大屏又写display: flex——没问题；但若小屏没设font-size，大屏却写font-size: 1.2rem，小屏就会继承浏览器默认值，可能突兀） - 断点别硬套“iPhone 6/7/8 是 375px”这种说法，用内容撑开需求决定断点，比如导航栏换行时的宽度就是合理断点
- 慎用
!important在媒体查询中覆盖——它会让后续调试变成猜谜
图片和 iframe 不响应，光调容器没用
就算 .content 设置了 width: 100%，里面的 <img> 或嵌入的 YouTube 视频仍可能溢出，因为它们默认按原始尺寸渲染。
立即学习“前端免费学习笔记（深入）”；
- 给所有响应式区域内的图片加统一规则：
img { max-width: 100%; height: auto; } - iframe 需要额外包裹一层并用 padding-bottom 实现宽高比控制，或直接用
aspect-ratio（Chrome 103+、Firefox 110+ 支持） - 如果用了
background-image，记得配background-size: cover或contain，否则会拉伸或裁切
font-size: 16px 在手机上看着还行，但手指点击 16px 高的按钮，误触率极高。至少保证可点击元素的 min-height 和 padding 合计 ≥ 44px。 
