响应式布局需html语义标签配合css视口设置、媒体查询和现代布局；viewport元标签必不可少；box-sizing、相对单位、max-width、图片自适应是基础；断点应依内容而定，推荐移动优先min-width递进；grid列数调整应直接修改grid-template-columns。
光靠 HTML 标签本身做不了响应式布局——<header></header>、<main></main>、<section></section> 这些语义化标签只管结构，不控制尺寸或排列。真要实现响应式，必须配合 CSS 的视口设置、媒体查询和现代布局引擎。
viewport 元标签漏了就全白搭
所有响应式效果的前提是浏览器知道“该怎么渲染”。没这行，移动端会按 980px 宽度缩放显示，@media 规则再精准也压不住默认行为：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误现象：
- 页面在手机上文字极小，必须双指放大才能阅读
- 开发者工具里拖动宽度，样式完全不变化
-
@media (max-width: 768px)写了但毫无反应
注意：width=device-width 不能写成 width=375 或漏掉；user-scalable=no 别加，它会破坏可访问性，某些 iOS 版本还会让 maximum-scale 失效。
HTML 语义标签要配 box-sizing 和相对单位
<article></article>、<aside></aside>、<nav></nav> 这些标签本身不带样式，但它们的盒子模型和尺寸单位决定能否弹性伸缩：
- 全局加
* { box-sizing: border-box; }，否则width: 30%+padding: 1rem实际占宽远超预期，多列直接错位 - 容器宽度优先用
%、rem、vw，别写死px；比如.container { width: 90%; max-width: 1200px; margin: 0 auto; } - 图片必须加
img { max-width: 100%; height: auto; display: block; }，否则溢出父容器或拉伸变形
媒体查询断点别抄数字，要看内容折行点
断点不是设备分辨率，而是内容开始“难受”的临界值。打开浏览器响应式调试器，拖动窗口宽度，观察：
- 文字是否开始换行挤在一起
- 按钮或卡片是否被压缩到难以点击
- 两栏是否自然变成单列更易读
记下那个像素值（比如 624px），取整为 640px 或 768px 更好维护。推荐写法是移动优先 + min-width 递进：
@media (min-width: 768px) { .container { display: flex; } }<br>@media (min-width: 1024px) { .container { grid-template-columns: 200px 1fr 200px; } }
避免同时写 @media (max-width: 767px) 和 @media (min-width: 768px)，某些缩放比例的 iPad 可能卡在缝隙里，两边都不命中。
Grid 布局里改列数别用 display: block 覆盖
比如三栏结构用 display: grid 定义：
.container {<br> display: grid;<br> grid-template-columns: 200px 1fr 200px;<br> gap: 1rem;<br>}
移动端想变单列，正确做法是：
@media (max-width: 768px) {<br> .container { grid-template-columns: 1fr; }<br>}
错误做法是加 display: block 或 flex-direction: column ——这会破坏 Grid 上下文，导致子项尺寸失控。如果需兼容 IE11，gap 得拆成 grid-column-gap 和 grid-row-gap，且子项要显式设 flex: none; width: 100% 防止拉伸。
真正难的不是写多少 @media，而是判断哪些元素该随屏幕缩放、哪些该保持最小可用尺寸、哪些该隐藏或重组——这些决策藏在内容节奏里，不在代码行数里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
