viewport标签必须放在最前面且写为，否则页面会先按默认视口渲染错乱；禁用缩放违反wcag标准；img自适应依赖父容器宽度；px单位不响应系统缩放，应优先用rem、%；断点应依内容自然断裂而非设备尺寸；可访问性适配比盲目加断点更重要。
viewport 标签没加或写错，所有自适应和缩放支持都白搭——这是最常被跳过的硬性前提。
为什么 viewport 必须放在
浏览器一解析到 就开始按默认视口（约 980px）渲染，如果 viewport 在 CSS 或 JS 后面才出现，页面已错乱一次，再改也晚了。它不是“可选配置”，而是强制重置渲染上下文的开关。
- 必须写成
<meta name="viewport" content="width=device-width, initial-scale=1.0">，不能省略initial-scale=1.0，否则 iOS Safari 会自动缩放导致点击偏移 - 禁用缩放（
user-scalable=no或maximum-scale=1.0）直接违反 WCAG 1.4.4 缩放要求，AT（辅助技术）用户无法放大阅读 - 别写
width=1200这类固定值——小屏设备会强制拉伸，触发横向滚动条，且字体模糊
img 自适应失效的三个真实原因
max-width: 100%; height: auto; 看似万能，但实际卡在父容器行为上。它不靠“图片自己缩”，而靠“父容器给它一个可参照的宽度上限”。
- Flex 容器里的
<img>默认受min-width: auto限制，哪怕写了max-width: 100%也不缩——必须在该 Flex 项（不是<img>）上加min-width: 0 - Grid 轨道用了
minmax(300px, 1fr)？那图片最小就卡死在 300px，max-width失效 - 父容器没设宽（比如只写
display: flex却没配width或max-width），100%就无从算起，浏览器 fallback 到内容固有宽度
缩放时文字/间距崩坏，别只改 px
用户用 Ctrl+ 或系统级放大（如 macOS 的 Zoom），若全用 px，字体、边距、行高会突然“卡住”不随缩放变化，造成可读性断裂。这不是 bug，是单位语义错配。
-
rem基于html字体大小，只要不手动重设font-size，它天然跟随系统缩放；但注意：不要用 JS 动态改document.documentElement.style.fontSize来适配屏幕宽度，这会覆盖用户主动缩放行为 -
%和em也响应缩放，但em是相对父元素，嵌套深了容易失控；%更稳，适合容器宽度、内边距 - 慎用
transform: scale()全局缩放——它让整个盒模型“假大”，但点击热区、焦点轮廓、offsetTop计算全乱，仅适合纯展示页，且必须反向重置子元素transform和font-size
断点不是按设备尺寸硬套，而是看内容何时“自然断裂”
拖动浏览器窗口时，某张图被裁、导航栏文字换行挤成三行、卡片高度突变——那个像素值才是你该加 @media 的地方。模拟器看不出这些，真机连 USB 调试一次比十次 DevTools 更准。
- 3–4 个断点足够：
(max-width: 480px)（窄手机）、(min-width: 481px) and (max-width: 768px)（竖屏平板）、1024px（小桌面）、1200px（宽屏） - 别信“768px 是 iPad 断点”——新 iPad Pro 屏宽是 1024px（横屏），旧款是 768px（竖屏），断点应由内容决定，而非设备型号
- 用
screen媒体类型做打印适配，用prefers-reduced-motion降级动画，这些对可访问性比多加一个断点更重要
真正难的不是写多少媒体查询，而是每次改完样式后，手动拖动窗口、切真机、开系统缩放，看布局是否“呼吸自然”。那些没被拖动测试覆盖的像素，就是线上用户最先遇到的错位点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
