viewport meta 标签缺失或位置错误会导致移动端按980px渲染，文字过小、按钮失灵、媒体查询失效；必须置于meta charset之后CSS之前，并包含initial-scale=1.0，禁用user-scalable=no，SSR场景需显式注入。
viewport meta 标签写错，所有响应式都白搭
没加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，或把它放在 <meta charset="UTF-8"> 之后、CSS 之前，移动端就会按 980px 渲染，文字小得看不清，按钮点不中，@media 查询直接失效。
常见错误包括：
- 漏写
initial-scale=1.0，导致 iOS Safari 默认缩放； - 硬写
width=375或width=414，不同 DPR 设备（如 Pixel 8 的 412px）会强行拉伸或压缩布局； - 误加
user-scalable=no，违反 WCAG 2.1，禁用双指放大，对低视力用户不友好； - Vite 或 Next.js App Router SSR 场景下，
<head>中的 meta 被自动移除，需显式在head.tsx或自定义Html组件中注入。
Flex 布局必须配合流式容器和相对单位
只写 display: flex 不等于响应式。父容器若用 width: 1200px，子项再 flex 也撑不出屏幕；字体若写死 font-size: 16px，小屏上文字就挤成一团。
关键实操点：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 容器宽度优先用
max-width: 1200px+margin: 0 auto，避免width: 100%套死父级； - 字体统一走
rem：根元素html { font-size: 16px; }，小屏改@media (max-width: 768px) { html { font-size: 14px; } }； - flex 子项别依赖
flex-basis: 300px这类固定值，换成flex-basis: minmax(280px, 1fr)或直接flex: 1； - IE11 兼容需拆开写：
flex-grow: 1; flex-shrink: 1; flex-basis: 0;，不能简写为flex: 1。
媒体查询断点不是设备尺寸，而是内容临界点
别照抄 “iPhone 6 是 375px，iPad 是 768px” —— 实际项目里，断点应由内容决定：哪一列卡片开始换行？哪段标题文字被截断？哪张图被压扁？那个宽度就是你的断点。
推荐做法：
- 用
min-width写法，符合移动优先逻辑：@media (min-width: 768px) { /* 平板及以上 */ }； - 3–4 个断点足够：
480px（小屏竖屏）、768px（平板竖屏）、1024px（横屏/小桌面）、1200px（宽屏）； - 避免嵌套过深的媒体查询，同一组件内不要同时写
(max-width: 767px)和(min-width: 768px)，容易漏掉边界； - 图片必须加
max-width: 100%; height: auto;，否则 flex 容器再灵活，图片也会溢出。
横向滚动和点击区域失效，往往不是 Flex 问题，而是视口+单位没配齐
你看到“页面横向滚动”或“按钮点不中”，第一反应不该是调 flex-wrap 或改 justify-content，而是立刻检查三件事：
-
<meta name="viewport">是否存在且位置正确（<head>最前，紧接<meta charset>）； - 有没有用
px写死高度/边距/字体——尤其是border: 1px solid在 DPR=3 的 iPhone 上实际渲染约 0.33px，可能不可见； - 触摸目标是否够大：iOS/Android 要求最小
44px × 44px，padding或min-height不足就点不准； - 如果用了
overflow-x: auto强制横向滚动，记得加scroll-behavior: smooth和-webkit-overflow-scrolling: touch提升手感。
复杂点在于：viewport 设置、单位选择、flex 行为、媒体查询，四者必须咬合。少一个，小屏上就出怪相——不是某个技术不行，而是环没闭上。
