viewport标签缺失或错误导致移动端页面不缩放、文字过小、横向滚动；需写为，且置于中仅一次。
viewport meta 标签漏写或写错，页面直接不响应
移动端页面不缩放、文字小得看不清、布局横向滚动——八成是 <meta name="viewport"> 没配对或参数不对。它不是可选的“增强功能”，而是浏览器渲染响应式布局的前提开关。
必须写在 里，且只写一次；常见错误包括：
• 忘了加 width=device-width，导致桌面宽度（通常是 980px）被强制继承
• 错把 initial-scale=1.0 写成 1（部分旧版 iOS Safari 会忽略）
• 加了 user-scalable=no，看似“防误操作”，实则违反 WCAG 可访问性要求，还可能被 iOS 系统降权
推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
用 rem 或 vw 做字体适配，但没处理最小可读尺寸
单纯让 font-size 随屏幕缩放，容易在小屏上缩到 12px 以下，文字糊成一片。这不是单位选错了，而是缺了保底逻辑。
立即学习“前端免费学习笔记（深入）”；
实际做法要分两层：
• 基准值用 vw 或 rem 动态计算（比如 font-size: clamp(14px, 4vw, 18px)）
• 必须配合 min-font-size 类 CSS 自定义属性，或用 clamp() 的下限兜底
• 避免在 body 上直接设 font-size: 100vw —— 这会让所有子元素按视口宽等比放大，失控风险极高
更稳妥的起步方式：
html { font-size: clamp(14px, 2.5vw, 16px); }
媒体查询断点硬编码 px，结果在高 DPI 屏上失效
写 @media (max-width: 768px) 在 iPhone 14 Pro 这类设备上大概率不触发——因为它的逻辑像素宽是 390px，但浏览器报告的是设备独立像素（DIP），而 CSS 媒体查询里的 px 是指 DIP，不是物理像素。问题不在查询本身，而在你依赖的断点数值没对齐真实使用场景。
建议策略：
• 断点优先按内容决定，而不是设备型号（比如“导航栏开始换行”比“iPad 竖屏”更可靠）
• 用 em 替代 px 写断点（@media (max-width: 48em)），和字体基准对齐，兼容缩放设置
• 避免只靠 min-width，搭配 prefers-reduced-motion 或 hover 媒体特性做渐进增强
Flexbox/Grid 容器内子项不换行，flex-wrap 被忽略
明明写了 display: flex 和 flex-direction: row，子元素却死扛着不折行，撑破容器——最常被忽略的是没开 flex-wrap: wrap。Flex 默认是 nowrap，这点和文本流直觉相反。
关键细节：
• flex-wrap 必须写在父容器上，子项的 flex-basis 或 width 才能起作用
• Grid 布局中，grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 比单纯用 flex-wrap 更可控，尤其在卡片类布局中
• Safari 旧版本对 flex-wrap: wrap-reverse 支持不稳定，生产环境慎用
响应式真正的难点不在代码怎么写，而在于每次改一个 max-width 或调一次 font-size，都得同步验证三件事：是否破坏最小点击区域、是否触发意外的横向滚动、是否让某段文字在某个断点下刚好卡在行尾截断。这些没法靠工具自动发现。
