必须添加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。
例如导航栏在小屏收为汉堡菜单，大屏横向展开：
模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
.nav { display: flex; flex-wrap: wrap; }
@media (max-width: 767px) {
.nav { flex-direction: column; }
.nav-item { width: 100%; }
}
关键点：
• flex-wrap: wrap 让子项自动换行，比媒体查询更轻量
• grid 的 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能自适应列数，比 JS 计算列数更稳
• 所有尺寸单位优先用 rem 或 %，避免固定 px
图片和媒体元素必须设置响应式行为
三步处理：
- 加
max-width: 100%和height: auto，保证不撑破父容器 - 用
srcset提供多分辨率源，避免手机下下载桌面图 - 对关键图（如 banner）用 CSS
background-image+background-size: cover，配合媒体查询切换背景图
示例：
@@##@@ srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w"
sizes="(max-width: 480px) 400px, (max-width: 960px) 800px, 1200px"
漏掉 sizes 属性会导致浏览器无法选对资源，尤其在 DPR > 1 的设备上加载过大图
响应式真正的难点不在写多少媒体查询，而在于组件边界是否清晰、内容流是否可控。一个按钮在小屏被截断，往往不是没加断点，而是它的父容器用了 white-space: nowrap 或固定 min-width —— 这类隐性约束，比断点本身更难排查。
