必须添加标签，且置于顶部；flex/grid布局需配合min-width:0防止溢出；媒体查询应按内容临界点设置断点，优先使用rem和clamp()；图片等嵌入内容须设max-width:100%并结合min-width:0。
没加 <meta name="viewport">，其他所有响应式代码都白搭——这是最常被跳过的硬性前提，不是可选项。
为什么 <meta name="viewport"> 必须放在
浏览器解析 HTML 是从上到下进行的。如果 <meta name="viewport"> 被插在 CSS 或 JS 后面，页面可能已按默认 980px 宽度渲染完毕，再改 viewport 也来不及重排布局。尤其在 iOS Safari 中，一旦初始渲染完成，initial-scale 就失效了。
- 必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别写
width=1024或user-scalable=no（除非是后台管理类系统） - 不要用
device-width混搭max-device-width—— 现代浏览器已不推荐后者，且与min-width媒体查询逻辑冲突
display: flex 和 display: grid 在语义结构中的实际取舍
Flexbox 适合一维线性排列（比如导航栏、卡片流），Grid 更适合二维网格（比如首页模块矩阵）。但两者都依赖父容器显式声明，且对子元素默认施加 min-width: auto，这会让图片、文字块在小屏上撑破容器。
- 只要用了
flex或grid，对内联内容或图片务必加：min-width: 0 - 避免嵌套多层 flex 容器——第三层开始就容易出现收缩异常，改用
grid-template-areas或拆分为独立组件更可控 - 语义标签如
<header></header>、<main></main>、<aside></aside>不自带响应行为，它们只是容器，真正起作用的是你写的 CSS
媒体查询断点不是设备尺寸，而是内容临界点
写 @media (min-width: 768px) 并不等于“适配 iPad”，而是说：“当容器宽度 ≥ 768px 时，这张卡片列表能舒服地并排两列”。断点应由内容决定，而不是查设备表。
- 移动优先写法：先写默认（小屏）样式，再用
@media (min-width: 620px)、@media (min-width: 840px)逐步增强，避免max-width堆叠导致中间状态遗漏 - 断点值建议用
rem（如@media (min-width: 39rem)），这样用户缩放字体时，断点会同步偏移，比像素更鲁棒 - 别给同一元素写多个断点反复改
font-size或padding—— 改用 CSS 自定义属性 +clamp()更简洁：font-size: clamp(1rem, 2.5vw, 1.25rem);
图片和嵌入内容溢出，90% 是因为漏了 max-width 组合
width: 100% 只保证填满父容器，但原始图宽 2000px 时，它仍会把 flex 容器撑开。真正起效的是组合规则。
- 通用写法：
img, iframe, video, object { max-width: 100%; height: auto; } - 若父容器是
display: flex，必须额外加：img { min-width: 0; }，否则 flex 项拒绝收缩 -
<picture></picture>或srcset是锦上添花，但没max-width就算加载了 WebP 也会溢出
最容易被忽略的其实是 min-width: 0 —— 它不出现在任何教程标题里，却几乎每个 flex/grid 布局崩溃现场都有它的影子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
