viewport标签错误会导致移动端显示异常，必须置于head开头且唯一，content须含width=device-width和initial-scale=1；布局用flex/grid+rem/clamp；图片需max-width:100%及srcset响应式处理。
viewport 标签写错等于没做响应式
几乎所有移动端显示异常——文字小得看不清、页面横向滚动、按钮点不中——都源于 <meta name="viewport"> 缺失或参数错误。它不是“锦上添花”，是浏览器渲染的开关，一解析就生效。
必须满足三个硬性条件：
-
<meta>标签得放在<head>最开头，且只出现一次；晚了可能首屏已按默认 980px 渲染完毕，再改会触发重排或缩放抖动 -
content中必须含width=device-width：不写它，iOS Safari 和安卓 WebView 都 fallback 到桌面视口 - 必须显式带
initial-scale=1：某些老 iOS 版本只写width=device-width仍会忽略缩放逻辑
禁用 user-scalable=no 或 maximum-scale=1 是可访问性违规，视力障碍用户无法放大，iOS 折叠屏下还可能错判媒体查询。最低可用配置就是：<meta name="viewport" content="width=device-width, initial-scale=1">
flex/grid + 相对单位才是布局主力
固定像素（如 width: 1200px）在小屏上必然溢出，但 px 并非敌人——边框、阴影这类“锚点型”样式用 px 更稳；容器宽、内边距、字体大小则必须随视口变化。
立即学习“前端免费学习笔记（深入）”；
推荐组合：
- 外层容器用
max-width: 1200px; margin: 0 auto，而非width: 1200px - 子元素布局优先用
display: flex或display: grid，避免float或inline-block - Flex 容器记得加
flex-wrap: wrap，否则子项死扛不换行，撑破父容器 - 字体大小用
rem或clamp(14px, 4vw, 18px)，别直接写font-size: 16px
图片不设 max-width: 100% 就会撑破布局
只靠 HTML 的 <img src> 不足以应对多设备，CSS 层面必须兜底。否则高分辨率图在窄屏上直接横向滚动，用户第一眼就流失。
基础防护很简单：
-
img { max-width: 100%; height: auto; }——解决“不溢出”，但不解决“加载浪费” - 真正响应式图片需配合
srcset和sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - 背景图用
background-size: cover或contain，别依赖width/height固定拉伸
媒体查询要用 min-width 且从内容出发定断点
移动端优先不是口号，是代码组织逻辑。从窄屏写起，用 @media (min-width: 768px) 逐步增强，而不是用 max-width 从桌面往下覆盖。
断点不该按“iPhone 12”“iPad Pro”来设，而应观察内容何时开始挤、何时需要重组：
- 文字行宽超过 70 字符？该加宽容器或分栏
- 导航菜单横向放不下？该切为汉堡菜单
- 表格列太多看不清？该隐藏非关键列或转为卡片式
常见断点参考值（仅作起点）：768px（平板横屏临界）、1024px（桌面窄屏临界），但最终以内容表现为准——同一断点在不同项目里可能根本不需要。
