移动端响应式核心是：容器设 max-width:100% + width:100%，图片设 max-width:100%; height:auto；用 min-width 媒体查询渐进增强；viewport 只需 width=device-width, initial-scale=1；Flexbox 避免固定像素 flex-basis，优先用百分比或 auto。
用 max-width + width: 100% 控制图片和容器不溢出屏幕
移动端图片撑破容器是最常见问题，根源是默认 img 不会自动缩放。只设 width: 100% 不够——如果父容器没限制最大宽度，它仍可能超出视口。
正确做法是给所有响应式容器加 max-width: 100%，再配 width: 100%；图片统一加：
img {
max-width: 100%;
height: auto;
}
注意：不要用 width: 100vw 替代，它会强制铺满整个视口宽度（含滚动条区域），在 iOS Safari 下容易导致横向滚动条意外出现。
媒体查询中优先用 min-width 而非 max-width
移动端优先的写法更易维护。基础样式写默认（小屏），再用 @media (min-width: 768px) 逐步增强。反向写 max-width 容易漏掉中间断点，且 CSS 层叠逻辑变复杂。
立即学习“前端免费学习笔记（深入）”；
典型断点建议（按设备实际 viewport 划分，不是按“手机/平板/桌面”模糊分类）：
-
@media (min-width: 480px)：窄屏手机横屏或小平板竖屏 -
@media (min-width: 768px)：iPad 竖屏起，主流平板最小宽度 -
@media (min-width: 1024px)：桌面端起步，避开高像素比手机误判
别硬套“Bootstrap 四级断点”，很多项目根本用不到 xl 或 xxl。
viewport meta 标签必须带 width=device-width，但慎用 user-scalable=no
没有这行，iOS 和 Android Chrome 都会把页面当桌面站渲染，文字极小、布局错乱：
<meta name="viewport" content="width=device-width, initial-scale=1">
加 user-scalable=no 看似能防用户双指缩放，但实际带来三个问题：
- 无障碍访问失败（视障用户依赖缩放）
- 部分安卓浏览器忽略该声明，行为不一致
- 一旦内容高度计算失误，用户无法放大查看被截断区域
真正需要锁定缩放的场景极少，绝大多数情况只保留 width=device-width, initial-scale=1 即可。
Flexbox 布局中避免对 flex-basis 写死像素值
比如 flex: 0 0 300px 在小屏下必然溢出。响应式 Flex 布局的关键是让子项能收缩：
- 用
flex: 1让项目均分剩余空间 - 用
flex: 0 1 auto允许收缩但不强制拉伸 - 真要设基准宽度，改用
flex-basis: 50%或flex-basis: min-content
配合 flex-wrap: wrap，比强行用 float 或 grid 更轻量、兼容性更好（IE11 也支持）。
响应式不是堆砌断点，而是从内容流出发，先保证小屏可读可用，再逐层叠加布局变化。最常被忽略的是字体大小和点击区域——14px 文字在 3x 屏上几乎不可读，24px 的按钮在手指操作时太小，这些细节比栅格系统更重要。
