必须添加viewport meta标签才能使响应式CSS生效，否则移动端浏览器默认按980px宽度渲染；需设width=device-width和initial-scale=1.0，写在head中且仅一次。
用 viewport meta 标签开启响应式基础
没加 ，再好的 CSS 也白搭。移动端浏览器默认按 980px 宽度渲染页面，不缩放就显示一小块，加了才让 CSS 媒体查询真正起作用。
必须写在 里，且只写一次：
常见错误包括：
• 写成 width=1200 这类固定值
• 漏掉 initial-scale=1.0，导致 iOS Safari 自动缩放
• 在多个 HTML 文件里重复或冲突定义
用 CSS 媒体查询按断点切换布局
断点不是凭感觉设的，优先按设计稿/真实设备数据定，比如 768px（平板竖屏）、1024px（平板横屏）、1200px（大桌面）。别硬套“手机/平板/桌面”三档，实际要更细。
推荐移动优先写法：先写小屏样式，再用 @media (min-width: ...) 覆盖大屏：
@media (min-width: 768px) {
.container { max-width: 750px; }
}
@media (min-width: 1024px) {
.container { max-width: 1000px; }
}
注意：
• 避免用 max-width 反向写法，容易嵌套混乱
• 断点值统一定义为 CSS 变量或预处理器变量，方便维护
• 不要用 device-width，它检测的是设备物理宽度，不可靠
弹性容器用 flexbox 或 grid，别依赖 float
float 布局在响应式中难控制、易塌陷，现代项目直接用 display: flex 或 display: grid。
例如导航栏在小屏收为汉堡菜单，大屏横向展开：
