多屏自适应核心是视口逻辑闭环：viewport必须正确设置，布局采用流式（flex/grid分离使用），断点按视口宽度而非设备类型设定；缺一环即导致特定设备体验失效。
多屏自适应不是靠“猜设备型号”或“写一堆固定宽度”，而是用一套逻辑覆盖所有视口——核心就三点：viewport 必须正确、布局必须流式、断点必须按视口宽度而非设备类型设。
viewport meta 标签写错等于没做响应式
几乎所有移动端显示异常（文字极小、横向滚动、按钮点不中）都源于这行缺失或参数错误：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是可选项，是现代移动浏览器渲染的开关。
-
width=device-width必须拼写准确，写成device_width或width=deviceWidth就失效 - 别加
maximum-scale=1或user-scalable=no，除非是 Kiosk 场景；否则会禁用双指缩放，违反 WCAG 可访问性要求 - 该标签必须放在
<head>最顶部，早于任何 CSS/JS，否则 iOS Safari 可能先按桌面宽度渲染再重排，造成闪屏 - 旧版 UC、QQ 浏览器对
initial-scale解析不稳定，所以不能依赖 scale 值做布局计算（比如用 JS 读window.devicePixelRatio再算 rem）
flex 和 grid 布局别混用同一容器
Flexbox 适合一维排列（导航栏、卡片横排），Grid 适合二维区域划分（仪表盘、后台管理页）。混用会导致行为不可控，尤其在 Android 4.4 WebView（Chromium 30）里，flex-wrap 和 grid-gap 可能被忽略。
- 导航栏用 Flex：小屏
flex-direction: column，大屏@media (min-width: 768px) { flex-direction: row; } - 内容区用 Grid：
grid-template-columns: minmax(300px, 1fr) 2fr;让左栏最小 300px、右栏占两份，比纯百分比更可控 - 避免嵌套：不要在
display: flex容器里再套display: grid子元素做主布局——语义混乱且调试困难 - 真机测试时注意：iOS Safari 10 以下不支持
vw单位用于font-size，若用4.266667vw设根字体，需 fallback 到 JS 动态设置document.documentElement.style.fontSize
媒体查询只按 width 断点会漏掉横屏和小高度场景
很多页面在 iPad 横屏下文字堆叠、表单被键盘顶飞，就是因为只写了 @media (min-width: 1024px)，却没考虑 orientation 和 max-height。
立即学习“前端免费学习笔记（深入）”；
- 横竖屏区分必须显式写：
@media (min-width: 768px) and (orientation: landscape)，而不是仅靠宽度 - 弹窗、登录页这类高度敏感组件，加
@media (max-height: 600px)单独调 padding 和 font-size - 别用
max-device-width：已废弃，它查的是设备物理宽度，而实际应基于视口宽度（max-width） - 避免深层嵌套媒体查询：
@media (min-width: 768px) { @media (orientation: landscape) { ... } }在部分旧浏览器中解析失败
图片和 iframe 的自适应常被忽略
就算布局全对，一张没处理的图片或 iframe 就能让整个响应式失效——它会撑破容器、触发横向滚动条。
- 所有
<img>必须加max-width: 100%和height: auto；用srcset+sizes提供多分辨率图，避免高 DPR 屏幕模糊 -
<iframe>不要裸写：src="xxx.html"必须同源，加loading="lazy"防止阻塞首屏，用 CSS 控制尺寸（如width: 100%; aspect-ratio: 16/9;），禁用默认滚动条：overflow: hidden - 别用
<frameset>：HTML5 已废弃，无 JS 交互能力，Chrome/Firefox 已不支持 - 移动端慎用双栏分屏：必须用媒体查询在
max-width: 768px时强制改为单列堆叠，否则小屏上左右内容挤在一起无法操作
真正难的不是写多少断点或用哪个布局模型，而是所有环节都得按视口逻辑闭环：viewport 控制缩放起点，单位决定缩放粒度，媒体查询定义切换边界，图片和 iframe 保证不破框——少一环，用户在某台设备上就会卡住。
