viewport meta 标签是响应式起点，必须放在 中且含 width=device-width；CSS 应移动端优先、用 min-width 媒体查询；图片需 srcset 与 sizes 配合实现真正响应式。
用 viewport meta 标签是响应式起点，不是可选项
没加这行，其他所有 CSS 媒体查询都白搭。手机浏览器默认按 980px 宽度渲染页面，缩放显示，viewport 就是用来关掉这个“自动缩放”的。
常见错误：漏写 width=device-width，或写成固定值如 width=375；还有人加了但放在 里——它必须在 中。
-
<meta name="viewport" content="width=device-width, initial-scale=1">是最低可用配置 - 别加
user-scalable=no，会锁死缩放，无障碍和阅读体验直接崩 - iOS Safari 对
maximum-scale的处理有 bug，某些版本下会导致双击放大失效
CSS 中用 rem 或 % 替代 px，但别无脑替换
px 在响应式里不是敌人，而是锚点。真正要换的是那些本该随容器变化的尺寸：宽度、内边距、字体大小。
比如按钮宽度设 width: 200px，在小屏上肯定溢出；但边框粗细用 border: 1px solid #ccc 反而更稳——它本就不该随屏幕缩放。
立即学习“前端免费学习笔记（深入）”；
- 字体大小优先用
rem，配合根元素font-size动态调整（如用 JS 或@media切换） - 容器宽度用
%或max-width+margin: 0 auto，避免硬写width: 1200px - 慎用
em做间距，嵌套组件里容易层层放大，rem更可控
媒体查询写法：用 min-width，别用 max-width 做主干
移动端优先不是口号，是代码组织逻辑。从窄屏样式写起，用 @media (min-width: 768px) 往上加规则，比反过来用 max-width 更易维护、更少覆盖冲突。
典型翻车现场：写了 @media (max-width: 767px) { .header { display: none; } }，结果桌面端忘了重置 .header 的 display，直接消失。
- 断点别照搬别人家的（如 768/1024/1200），按自己内容撑开的实际阈值定，用浏览器调试器拖动宽度看“哪里开始挤”
- 同一组件多个断点时，只覆盖需要变的属性，不要重复写整个规则块
- CSS 中
@media查询顺序很重要：后写的同级规则会覆盖前面的，别让小屏规则被大屏规则意外压住
图片响应式不能只靠 width: 100%
光写 img { width: 100%; height: auto; } 只解决“不溢出”，没解决“加载浪费”。小屏手机下载 2MB 的桌面图，流量和首屏时间全毁了。
核心是让浏览器自己选合适尺寸的图源，而不是靠 CSS 拉伸压缩。
- 用
<picture></picture>+<source srcset="" media=""></source>组合，按视口宽度切不同分辨率图 - 单图场景够用就用
<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="HTML怎么创建响应式网页_HTML响应式布局基础教程" > - 记得给
<img alt="HTML怎么创建响应式网页_HTML响应式布局基础教程" >加alt，否则srcset在部分旧浏览器降级时会丢失替代文本
