纯HTML和CSS可实现真正可用的响应式布局，关键在于视口控制、流动单位与媒体查询断点三者缺一不可；必须添加viewport meta标签，优先采用移动优先与渐进增强策略，合理搭配Grid、Flexbox及媒体查询。
纯 HTML 和 CSS 就能做出真正可用的响应式布局，不需要框架、不依赖 JavaScript。关键不是“堆技术”，而是选对三层基础：视口控制 + 流动单位 + 媒体查询断点，缺一不可。
必须加 <meta name="viewport">，否则媒体查询基本失效
这是最常被跳过的一步，尤其后端开发者写静态页时容易忽略。没有它，移动端浏览器会按桌面宽度（通常是 980px）渲染页面，@media 规则在手机上根本不会触发。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，必须放在<head>里 - 别写
user-scalable=no或maximum-scale=1.0，这会破坏可访问性，也违反 WCAG - 如果用
rem做字体适配，需额外配合 JS 动态设置html字体大小——但纯 CSS 场景下，直接用em或媒体查询调font-size更稳妥
minmax() 配 auto-fit 是 Grid 响应式的实际起点
很多人抄 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 却发现小屏崩成一列还溢出，问题不在语法，而在没约束最小项宽和容器内边距。
-
minmax(240px, 1fr)比300px更安全，iPhone SE 宽度是 375px，留出左右 margin 后单列有效宽度约 340px 左右 - 务必搭配
gap，且卡片内部用box-sizing: border-box，否则 padding/margin 会挤压minmax的计算空间 -
auto-fit会合并空列并拉伸剩余项，auto-fill则保留空位——响应式网格中几乎只用auto-fit - 图片记得加
img { width: 100%; height: auto; }，否则固定高图会撑破 grid item
媒体查询别“从零写起”，优先用移动优先 + 渐进增强
不是每个断点都要重写整套样式，而是让基础样式跑在小屏，再用 @media (min-width: ...) 往上加能力。这样代码更轻、维护更稳。
立即学习“前端免费学习笔记（深入）”；
- 推荐三个主流断点：
@media (min-width: 768px)（平板横屏）、@media (min-width: 992px)（窄桌面）、@media (min-width: 1200px)（宽桌面），比死守 768/1024/1280 更贴合真实设备分布 - Flexbox 布局中，
flex-wrap: wrap+flex-basis是比媒体查询更轻量的响应方式，例如.item { flex: 1 1 300px; }在容器缩小时自动换行 - 避免在媒体查询里写
display: block覆盖 grid/flex——那等于放弃弹性布局优势，该改的是grid-template-columns或flex-direction
真正难的不是写出能跑的响应式，而是判断哪些地方该用 minmax() 自适应，哪些该用媒体查询硬切，哪些干脆交给 flex-wrap。这取决于内容密度、交互意图和是否要保顺序——比如导航菜单在手机必须单列堆叠，而文章卡片可以靠 grid 自动重排，混用才不累。
