HTML5响应式布局核心是@media媒体查询配合viewport meta标签、相对单位和Flex/Grid布局。必须写对<meta name="viewport" content="width=device-width, initial-scale=1.0">，断点按内容而非设备设定，容器用%或max-width，字体用rem/em，图片设max-width:100%，优先使用flexbox和grid。
HTML5 响应式布局不靠“写一堆 <meta> 标签”或“加个框架就完事”，核心是用 @media 规则按视口宽度分段控制样式，且必须配合合理的 HTML 结构和单位选择。
viewport meta 标签必须写对，否则媒体查询直接失效
很多页面在手机上缩成一团、点击区域错位，根本原因就是 <meta name="viewport"> 缺失或写错。它不是可选项，是媒体查询生效的前提。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 禁止写成
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;
真正卡住人的往往不是语法，而是忘了重置默认样式（比如 <ul> 的 margin）、忽略了触摸设备的点击热区（至少 44×44px）、或者在媒体查询里重复写了不该覆盖的规则。调试时打开浏览器的设备模拟器，拖动宽度滑块，盯着布局裂开的那一帧——那就是你该加断点的地方。
