必须添加viewport meta标签才能使响应式CSS生效，否则移动端浏览器默认按980px宽度渲染；需设width=device-width和initial-scale=1.0，写在head中且仅一次。
用 viewport meta 标签开启响应式基础
没加 <meta name="viewport" >，再好的 CSS 也白搭。移动端浏览器默认按 980px 宽度渲染页面，不缩放就显示一小块，加了才让 CSS 媒体查询真正起作用。
必须写在 <head> 里，且只写一次：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误包括：
• 写成 width=1200 这类固定值
• 漏掉 initial-scale=1.0，导致 iOS Safari 自动缩放
• 在多个 HTML 文件里重复或冲突定义
用 CSS 媒体查询按断点切换布局
断点不是凭感觉设的，优先按设计稿/真实设备数据定，比如 768px（平板竖屏）、1024px（平板横屏）、1200px（大桌面）。别硬套“手机/平板/桌面”三档，实际要更细。
推荐移动优先写法：先写小屏样式，再用 @media (min-width: ...) 覆盖大屏：
@media (min-width: 768px) {<br> .container { max-width: 750px; }<br>}<br>@media (min-width: 1024px) {<br> .container { max-width: 1000px; }<br>}
注意：
• 避免用 max-width 反向写法，容易嵌套混乱
• 断点值统一定义为 CSS 变量或预处理器变量，方便维护
• 不要用 device-width，它检测的是设备物理宽度，不可靠
弹性容器用 flexbox 或 grid，别依赖 float
float 布局在响应式中难控制、易塌陷，现代项目直接用 display: flex 或 display: grid。
例如导航栏在小屏收为汉堡菜单，大屏横向展开：
.nav { display: flex; flex-wrap: wrap; }<br>@media (max-width: 767px) {<br> .nav { flex-direction: column; }<br> .nav-item { width: 100%; }<br>}
关键点：
• flex-wrap: wrap 让子项自动换行，比媒体查询更轻量
• grid 的 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能自适应列数，比 JS 计算列数更稳
• 所有尺寸单位优先用 rem 或 %，避免固定 px
图片和媒体元素必须设置响应式行为
<img> 默认不响应，拉伸变形或溢出容器是高频问题。
三步处理：
- 加
max-width: 100%和height: auto，保证不撑破父容器 - 用
<picture>+srcset提供多分辨率源，避免手机下下载桌面图 - 对关键图（如 banner）用 CSS
background-image+background-size: cover，配合媒体查询切换背景图
示例：
<img src="hero-400.jpg"<br> srcset="hero-400.jpg 400w,<br> hero-800.jpg 800w,<br> hero-1200.jpg 1200w"<br> sizes="(max-width: 480px) 400px, (max-width: 960px) 800px, 1200px"<br alt="Hero">
漏掉 sizes 属性会导致浏览器无法选对资源，尤其在 DPR > 1 的设备上加载过大图
响应式真正的难点不在写多少媒体查询，而在于组件边界是否清晰、内容流是否可控。一个按钮在小屏被截断，往往不是没加断点，而是它的父容器用了 white-space: nowrap 或固定 min-width —— 这类隐性约束，比断点本身更难排查。
