HTML5响应式布局核心是@media媒体查询配合viewport meta标签、相对单位和Flex/Grid布局。必须写对，断点按内容而非设备设定，容器用%或max-width，字体用rem/em，图片设max-width:100%，优先使用flexbox和grid。

HTML5 响应式布局不靠“写一堆 标签”或“加个框架就完事”，核心是用 @media 规则按视口宽度分段控制样式，且必须配合合理的 HTML 结构和单位选择。

viewport meta 标签必须写对，否则媒体查询直接失效

很多页面在手机上缩成一团、点击区域错位，根本原因就是 缺失或写错。它不是可选项，是媒体查询生效的前提。

• 正确写法：

• 禁止写成 width=1200 或 user-scalable=no（后者会破坏可访问性）
• 如果用了 maximum-scale=1.0，iOS Safari 双击缩放会失效，用户无法放大看文字

媒体查询断点别硬套“常见尺寸”，优先按内容断

用 @media (max-width: 768px) 做平板断点？不一定。真实项目中，断点应该由内容撑开后“开始难看”的那一刻决定，而不是设备型号。

• 先写桌面端样式，再逐步缩小浏览器窗口，观察哪一列开始换行、哪张图被裁切、哪段文字挤成两行——那个宽度就是你的第一个断点
• 推荐用 min-width 而非 max-width，更符合移动优先逻辑：

  @media (min-width: 768px) { /* 平板及以上 */ }

• 避免堆砌过多断点，3–4 个足够：480px（小屏）、768px（平板竖屏）、1024px（平板横屏/小桌面）、1200px（宽屏）

容器和字体必须用相对单位，px 是响应式的敌人

写死 width: 320px 或 font-size: 16px 会让媒体查询前功尽弃——样式变了，但元素本身还是刚性尺寸。

• 容器宽度优先用 %、max-width + margin: 0 auto，避免 width: 100% 套死父级
• 字体大小用 rem（根元素 font-size 可随视口动态改）或 em，不用 px；例如：

  html { font-size: 16px; }@media (max-width: 768px) { html { font-size: 14px; } }

• 图片用 max-width: 100%; height: auto;，禁用固定 height

flexbox 和 grid 是布局主力，float 和 inline-block 已过时

用 float 清除、inline-block 对齐的写法，在响应式里极易崩坏，且维护成本高。

• 横向导航栏、卡片列表、表单布局，统一用 display: flex，配合 flex-wrap: wrap 和 flex-basis 控制换行与占比
• 复杂网格（如图文混排、仪表盘），直接上 display: grid，用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应列数
• 注意 IE11 对 flex 的兼容问题：不支持 flex: 1 简写，需拆成 flex-grow: 1; flex-shrink: 1; flex-basis: 0;

真正卡住人的往往不是语法，而是忘了重置默认样式（比如