必须添加viewport标签，否则响应式失效；flex布局优于百分比；断点应依内容而非设备尺寸设定；图片需max-width:100%；响应式是流动约束而非静态适配。
没加 <meta name="viewport"> 标签，其他所有响应式努力基本白搭——这是最常被跳过的一步，也是所有后续失效的根源。
必须在
它不是可选配置，而是移动设备识别你页面尺寸的前提。浏览器默认按 980px 宽度渲染页面，不加这个标签，@media 规则根本不会触发，哪怕你写了十套断点也没用。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在内，且越靠前越好（最好紧挨<title></title>后） - 别写成
width=1024或user-scalable=no——前者锁定宽度，后者禁用缩放，会直接违反 WCAG 可访问性要求 - 如果用构建工具（如 Vite、Webpack），检查 HTML 模板是否被覆盖或遗漏；某些 CMS（如 WordPress 主题）可能默认不带，需手动补上
flex 布局比百分比更可靠，但别忘了 flex-wrap
用 width: 50% 实现两栏，在小屏下会溢出或重叠；而 display: flex 配合 flex-wrap: wrap 能自动换行，逻辑更直观。
- 容器设
display: flex+flex-wrap: wrap，子项用flex: 1 1 calc(50% - 10px)（留间隙）比纯百分比抗干扰更强 - 避免对 flex 子项设固定
width: 200px——它会撑破容器，尤其在窄屏下 -
gap属性兼容性已很好（Chrome 100+/Firefox 100+），比用margin模拟更干净；老版本可用padding+box-sizing: border-box替代
媒体查询断点别照搬设备尺寸，按内容“断”
写 @media (max-width: 768px) 不是因为 iPad 宽 768px，而是你的导航栏文字在 768px 下开始换行或挤压——断点应由内容决定，而非设备列表。
- 先写移动端样式（mobile-first），再用
min-width逐步增强：比如默认堆叠，到 600px 才设flex-direction: row - 避免嵌套过多断点（如 320/480/768/1024/1200）——多数项目只需 2–3 个：手机（≤600px）、平板（601–1024px）、桌面（≥1025px）
- 用浏览器 DevTools 的「Toggle device toolbar」实时拖动宽度观察布局变化点，记下那个刚好出问题的像素值，就是你的断点
img 标签不加 max-width: 100% 就算不上响应式
图片宽度过大时会直接撑破容器，导致横向滚动条出现——这是用户第一眼就能感知的“不响应式”。CSS 控制比 HTML 属性更可控。
- 全局加一条：
img { max-width: 100%; height: auto; }，所有<img>自动适配父容器 - 不要只依赖
srcset——它解决的是分辨率切换（@2x 图），不解决尺寸溢出；<picture></picture>适合艺术方向裁剪，但基础场景用max-width更直接 - SVG 和背景图也要处理：
background-size: contain或cover，否则同样失真
真正卡住人的从来不是语法，而是把 viewport 当装饰、把断点当设备清单、把图片当静态资源——响应式是流动的约束，不是静态的适配。每加一行 CSS，都要问一句：它在 320px 宽的屏幕上还成立吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
