viewport 必须同时设置 width=device-width 和 initial-scale=1.0，否则导致 ios safari 缩放异常、android 忽视缩放、PC 模拟失效；css 优先用 rem + 动态 html font-size，图片等需 max-width:100% 且 height:auto，媒体查询按内容断点而非设备型号，真实设备测试不可替代。
viewport meta 标签必须配对设置 width 和 initial-scale
不设或只设其中一项，会导致 iOS Safari 缩放异常、Android 浏览器无视缩放、PC 端模拟移动视口失效。常见错误是只写 ，漏掉 initial-scale=1.0。
-
width=device-width告诉浏览器用设备物理宽度（单位为 CSS px）作为布局视口宽度 -
initial-scale=1.0强制初始缩放为 1，否则某些 Android 机型会默认放大 1.25 倍 - 避免使用
user-scalable=no—— 屏幕阅读器和视力障碍用户依赖双指缩放
CSS 中优先用 rem + html 动态 font-size，不用 em 或固定 px
em 依赖父元素字体大小，嵌套深时计算混乱；px 在高 DPI 屏幕上模糊且无法随系统字号调整。rem 始终相对于根元素，配合 js 动态设置 html 的 font-size，才能实现真正响应式缩放。
- 典型做法：以 375px 设计稿为基准，1rem = 10px →
html { font-size: 10px; }（375 设备） - 用 JS 按屏幕宽度等比缩放：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px'; - 注意：iOS Safari 在横屏切换时可能不触发 resize，需监听
orientationchange补充更新
图片和媒体元素必须加 max-width: 100% 和 height: auto
否则在小屏上溢出容器、破坏文档流，甚至触发横向滚动条。这个规则适用于所有 、 及其包裹容器。
- 仅设
width: 100%不够 —— 若原始图宽高比失衡，会拉伸变形 -
height: auto保证等比缩放，是关键配套声明 - 对背景图，用
background-size: contain或cover替代固定尺寸
img, video, iframe {
max-width: 100%;
height: auto;
}用 @media 查询做断点时，优先按内容需要，而非设备型号
写 @media (max-width: 768px) 比 @media (max-width: 768px) and (orientation: portrait) 更可靠；查 iphone 14 Pro Max 的 1290×2796 分辨率再写 media 是徒劳的 —— 用户可以旋转、分屏、缩放字体，甚至开启“显示更大文字”系统设置。
立即学习“前端免费学习笔记（深入）”；
- 推荐断点：320px（超小屏）、480px（小屏正文可读）、768px（平板竖屏）、1024px（平板横屏/小桌面）
- 避免用
device-width—— 它返回的是设备独立像素（DIP），不是 CSS 像素，chrome DevTools 模拟时行为不一致 - 复杂布局建议搭配
clamp()：例如font-size: clamp(14px, 4vw, 18px);，比纯 media 更平滑
适配真正的难点不在代码本身，而在测试环节：必须在真实设备上验证横竖屏切换、系统字体放大、分屏多任务下的渲染表现。模拟器跑得再快，也盖不住 Safari 对 vh 单位的滚动条高度误判，或者安卓 webview 对 rem 缩放的延迟响应。