<meta name="viewport"> 是浏览器渲染逻辑的开关，必须置于 <head> 最前，含 width=device-width 和 initial-scale=1.0；缺失或错误将导致响应式失效。
必须用 <meta name="viewport"> 开头，否则所有后续布局都会失效——它不是可选项，是浏览器渲染逻辑的开关。
viewport 标签写错，媒体查询直接不触发
很多页面在手机上缩成一团、文字看不清、点击区域偏移，根本原因就是 <meta name="viewport"> 缺失、拼错（比如写成 viewprot），或放到了 <body> 里。它必须出现在 <head> 最前面，且只含两个核心参数：
-
width=device-width：让视口宽度等于设备逻辑像素（如 iPhone 14 是 390px），不是写死width=320 -
initial-scale=1.0：确保以 1:1 渲染，避免 iOS Safari 自动放大小字号导致布局跳动 - 禁用
user-scalable=no或maximum-scale=1.0：会破坏双击缩放和系统级辅助功能，违反 WCAG
容器用 max-width + width: 100%，别写死 width: 1200px
固定像素值会直接覆盖媒体查询里的修改，让响应式形同虚设。正确做法是让容器“有弹性但有上限”：
- 主容器写
width: 100%; max-width: 1200px; margin: 0 auto;，小屏时占满，大屏时居中且不无限拉伸 - 侧边栏/卡片等子元素避免用
float或inline-block，它们在断点切换时极易错位或撑破父级 - Flexbox 中慎用
flex-basis: 300px，推荐flex: 1或flex-basis: 0+flex-grow: 1，让占比由内容驱动
<picture> 和 srcset 不是锦上添花，是图片响应式的刚需
只用 <img src="xxx.jpg"> 无法适配不同分辨率和视口宽度。真正起作用的是组合：
立即学习“前端免费学习笔记（深入）”；
-
srcset提供多尺寸源文件：srcset="photo-480.jpg 480w, photo-768.jpg 768w, photo-1200.jpg 1200w" -
sizes告诉浏览器“这张图在不同断点下占多宽”：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 需要切换构图（如移动端竖图、桌面横图）或格式降级（
webp→jpg）时，必须用<picture>，<source>按顺序匹配，<img>是最终 fallback
Flexbox/Grid 的断点控制要配合 min-width 媒体查询
移动优先不是口号，是 CSS 写法逻辑。先写默认（小屏）样式，再用 @media (min-width: 768px) 逐步增强：
- 小屏默认单列：
.grid { display: grid; grid-template-columns: 1fr; } - 平板起两列：
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } - 桌面三列：
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } - 别用
max-width反向堆叠，容易遗漏中间状态；也别硬套设备名（如 “iPad Pro”），断点应由内容“开始难看”的那一刻决定
最常被忽略的一点：所有相对单位（rem、%、vw）都依赖于一个前提——<meta name="viewport"> 生效。它错了，后面所有弹性计算都是空中楼阁。
