响应式网页需 viewport 标签 + 媒体查询 + 流动布局；图片用 max-width: 100% 和 height: auto；断点按移动优先、内容驱动；字体用 clamp()，触摸目标≥44px。
响应式网页不是靠“加个 meta 标签”就完事的，核心是用 CSS 媒体查询 + 流动布局控制元素在不同视口下的行为；漏掉 viewport 设置或写死像素宽高，手机上照样会缩放错乱。
viewport meta 标签必须写对
没它，移动端浏览器默认按 980px 宽度渲染页面，再缩放显示，所有响应式 CSS 都白搭。
- 必须放在
里，且优先级最高（别被其他 meta 挡住） - 标准写法是：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 别写
user-scalable=no—— 屏幕阅读器、视力障碍用户需要缩放，ios 17+ 也会降级处理 - 如果用了
maximum-scale=1，safari 在横屏切换时可能卡住布局
用 max-width 替代 width: 100% 做图片响应式
width: 100% 在父容器窄于图片原始尺寸时会拉伸失真；max-width: 100% 才真正保比例、防溢出。
- 正确写法：
img { max-width: 100%; height: auto; } - 别漏掉
height: auto，否则图片高度塌陷或比例错乱 - SVG 图片也要加，否则在某些 android webview 里会默认按 300×150 渲染
- 背景图用
background-size: contain或cover，但注意cover可能裁剪重要内容
@media 查询要按移动优先写，别反着来
先写小屏样式（基础），再用 @media (min-width: 768px) 逐步增强——这样避免重复覆盖、减少 !important 依赖，也更利于维护。
- 断点别硬套“iphone X 宽度”，用内容决定：比如文字换行难看时、卡片挤成一列时，才是加断点的信号
- 别用
@media (max-width: 767px)写小屏——这种写法容易漏掉 768px 边界值，且不利于从低到高叠加 - 用
em或rem写断点（如48em），比像素更适配缩放后的视口 - 测试时关掉 chrome DevTools 的 “Disable cache”，否则媒体查询可能不重算
flexbox/Grid 的 min-content 和 max-content 很关键
响应式不是只调宽度，还要管内容撑开/收缩的边界。比如导航栏在小屏下该换行还是折叠？按钮文字该省略还是换行？这些都靠内容尺寸控制。
-
min-width: min-content让元素至少容纳最长单词（防文字溢出容器） -
width: max-content配合overflow-wrap: break-word，可让长链接自动折行 - Grid 布局中，用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))比固定列数更可靠 - 别在 flex 容器里对子项设
width: 100%—— flex 项默认占满剩余空间，反而会破坏弹性
最常被忽略的是字体大小的响应式：只用 rem 不够，得配合 clamp(1rem, 2.5vw, 1.25rem) 这类函数，否则小屏字太小、大屏字太大。还有，触摸目标（比如按钮）最小尺寸得 ≥ 44px，这不是建议，是 WCAG 和 iOS 人机界面指南的硬性要求。