必须添加viewport标签，否则手机端页面会缩放显示并出现横向滚动条；应使用width=device-width、initial-scale=1，并置于head内靠前位置，配合流式布局、rem单位及min-width媒体查询实现响应式。
viewport 标签必须加，否则手机上永远是缩放后的小字+横向滚动条，这是所有适配问题的起点。
没加 <meta name="viewport"> 就别谈响应式
现象：页面在手机浏览器里文字极小、左右能拖动、点击区域不准——90% 是因为漏了这行。
原因：现代手机浏览器默认以约 980px 宽度渲染页面，再整体缩小显示。加了 <meta name="viewport" content="width=device-width, initial-scale=1"> 才会让它按真实设备宽度（比如 375px、414px）来布局。
注意点：
- 必须放在 <head> 内，且越靠前越好
- 不要写成 width=1024 或 user-scalable=no（后者违反 WCAG 可访问性规范）
- 真机测试时，用 Safari 开发者工具或 Chrome 的 Device Mode 检查 viewport 是否生效
用流式单位 + max-width 控制容器宽度
固定像素（如 width: 960px）在小屏必然溢出，在大屏又留白过多。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
- 容器用 width: 100% 铺满可用空间
- 加 max-width: 1200px 防止在 4K 屏上拉得太开
- 配合 margin: 0 auto 居中
- 文字、图片、按钮等内部元素优先用 rem 或 %，避免死写 px
示例：
.wrapper {<br> width: 100%;<br> max-width: 1200px;<br> margin: 0 auto;<br> padding: 0 1rem;<br>}
媒体查询按 min-width 分段增强，别用 max-width 倒推
“移动优先”不是口号，是实际性能和维护成本的选择：基础样式跑在所有设备上，大屏才叠加增强规则。
常见断点建议（单位 px）：
- @media (min-width: 768px)：平板横屏起
- @media (min-width: 992px)：小桌面起
- @media (min-width: 1200px)：标准桌面起
错误做法：
- 为手机单独写 @media (max-width: 767px)，导致基础样式空洞、逻辑割裂
- 断点堆到 5 层以上，维护成本陡增
- 在媒体查询里重写整个布局，而不是只改关键属性（如 flex-direction、grid-template-columns）
图片和交互元素必须做自适应兜底
图片不设限宽，会在手机上撑破容器；按钮没设最小高度，小屏点击困难。
关键 CSS 规则：
- img, video { max-width: 100%; height: auto; }
- button, input[type="text"] { min-height: 44px; }（iOS 推荐最小触控尺寸）
- 表单控件用 font-size: 1rem 起，避免 Safari 自动放大文本框
- 避免 position: fixed 全局导航在 iOS 上滚动卡顿，改用 position: sticky 更稳妥
真正难的不是写几行媒体查询，而是判断哪些内容在小屏该隐藏、哪些交互要降级、哪些字体大小该随视口缩放——这些没法靠 class 自动解决，得看真实设备上的手指操作是否自然。
