必须加<meta name="viewport">标签，推荐三断点：max-width: 480px、min-width: 481px and max-width: 768px、min-width: 769px；用flex替代浮动，配合max-width: 100%和word-break: break-word保障图文响应。
直接用 @media + flex + viewport 三件套，就能覆盖 90% 的日常响应式需求。不依赖框架、不写冗余类名，改几行 CSS 就能生效。
必须加的 <meta name="viewport"> 标签
没有它，@media 在手机上基本失效——浏览器会按桌面宽度渲染，再缩放显示，媒体查询的断点就全乱了。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 漏掉
initial-scale=1.0会导致 iOS Safari 自动缩放，文字变小、点击区域错位 - 别写成
user-scalable=no，这会破坏可访问性，且部分安卓浏览器已忽略该属性
@media 断点怎么选才不踩坑
别照搬 Bootstrap 的 768px、992px。真实设备宽度 ≠ 媒体查询值，关键看 CSS 像素（CSS px），不是物理像素。
- 推荐三个实用断点：
@media (max-width: 480px)（小屏手机）、@media (min-width: 481px) and (max-width: 768px)（大屏手机/小平板）、@media (min-width: 769px)（桌面） - 移动端优先写法更可靠：先写默认样式（适配小屏），再用
min-width逐级增强，避免样式层叠冲突 - 慎用
device-width：它在横屏/竖屏切换时不会触发重排，width才是真正监听视口宽度的属性
用 display: flex 替代浮动做栅格
浮动布局在响应式中极易崩坏：float + width: 100% 在小屏下常因 margin/padding 溢出导致换行错乱；而 flex 天然支持换行和等分布局。
立即学习“前端免费学习笔记（深入）”；
- 基础栅格容器：
.grid { display: flex; flex-wrap: wrap; gap: 1rem; } - 子项自适应：
.grid-item { flex: 1 1 300px; }—— 表示“最小 300px，可伸缩，可换行” - 小屏单列：
@media (max-width: 480px) { .grid-item { flex-basis: 100%; } } - 注意：IE10+ 支持 flex，但 IE10 不支持
gap，需用margin回退
图片和文字的响应式底线处理
布局再灵活，内容溢出或文字挤成一团，用户照样觉得“不响应”。这两处最容易被忽略。
- 图片强制自适应：
img { max-width: 100%; height: auto; }，缺height: auto会导致拉伸变形 - 文字不折行崩溃：
p, li { word-break: break-word; }，尤其对长 URL 或中英文混排内容有效 - 字体大小别锁死：
font-size: clamp(1rem, 2.5vw, 1.25rem);是现代方案，但兼容性要求高时，用rem+ 媒体查询更稳
真正难的不是写多少代码，而是判断哪些元素该响应、哪些该保持固定。比如导航栏按钮图标在小屏下要不要隐藏？表单输入框是否允许横向滚动？这些决策比技术实现更影响体验。
