HTML页面本身不决定响应式表现，真正起作用的是CSS媒体查询、相对单位和视口控制；viewport元标签必须正确设置，否则所有响应式逻辑失效。
直接说结论：HTML 页面本身不决定响应式表现，真正起作用的是 CSS 的媒体查询、相对单位和视口控制；没配好 viewport 元标签，再好的 CSS 也白搭。
viewport 元标签必须写对，否则所有响应式逻辑失效
很多页面在手机上被缩成一团、文字小得看不清，根本原因就是没设或错设了 viewport。它不是可选项，是响应式的第一道门槛。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是最低可用配置，width=device-width让浏览器用设备的逻辑像素宽度（不是物理像素），initial-scale=1.0防止自动缩放 - 禁用用户缩放（
user-scalable=no）要谨慎——会影响可访问性，尤其对视力障碍用户；仅在特定 H5 活动页中考虑启用 - 旧版 Android WebView 或某些定制浏览器可能忽略
maximum-scale，靠 JS 动态修正成本高，不如默认允许缩放
媒体查询断点别硬套“768px”“1200px”，得看内容而非设备
所谓“平板断点 768px”是历史惯性，现在大量折叠屏展开后宽度超 900px，而部分大屏手机横屏也接近 800px。断点应基于内容溢出时机，而不是设备分类。
- 移动优先写法更可靠：
@media (min-width: 701px) { ... }比@media (max-width: 768px) { ... }更少冲突，也避免覆盖遗漏 - 用
rem或em写断点（如@media (min-width: 43.75rem)）能与根字体大小联动，适合 rem 布局体系 - 避免嵌套多层媒体查询，CSS 会按顺序匹配，后面规则可能被前面的覆盖，调试时用浏览器 DevTools 的 “Toggle device toolbar” 实时验证
flexbox 和 grid 是布局主力，但 float / inline-block 在老项目里还得兜底
Flexbox 和 CSS Grid 能解决 90% 的响应式布局需求，但如果你维护的是 IE11 或更老的系统内嵌 WebKit，就得准备降级方案。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器加
flex-wrap: wrap+ 子项设flex: 1 1 280px，比百分比浮动更稳；注意min-width别设太小，否则小屏下仍会挤成一行导致横向滚动 - Grid 的
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是目前最简洁的自适应列数写法，但 Safari 15.4 之前不支持auto-fit，需加@supports判断 - 老项目若还在用
float，务必在媒体查询里加clear: both和重置width，否则小屏下容易塌陷
图片和字体的响应式常被忽略，但直接影响首屏体验
布局适配了，图片糊、字体小、按钮点不准，用户照样觉得“这网页不行”。这两项不是锦上添花，而是响应式闭环的关键一环。
- 图片必加
max-width: 100%; height: auto;，否则宽图在小屏强制撑开容器；srcset和sizes要配对使用，比如<img src="a.jpg" srcset="a-400w.jpg 400w, a-800w.jpg 800w" sizes="(max-width: 600px) 400px, 800px"> - 字体大小别全用
px，主文案用rem，配合 JS 动态设置document.documentElement.style.fontSize；但标题等强调层级可用clamp(1.25rem, 4vw, 2rem)实现流体缩放 - 触摸目标（如按钮、链接）最小尺寸建议 ≥ 44×44px（iOS 人机指南），用
padding扩展点击热区，别只靠font-size控制
真正难的不是写出几条媒体查询，而是判断某个元素在 320px 宽度下是否还该显示、要不要隐藏、隐藏后信息是否被替代、辅助技术能否感知。响应式不是让页面“看起来差不多”，而是让功能和信息在任何尺寸下都可达、可读、可操作。
