viewport标签缺失或错误是响应式失效的起点，正确写法为<meta name="viewport" content="width=device-width, initial-scale=1">，需避免user-scalable=no等干扰属性。
viewport meta 标签写不对，手机上页面直接缩成一团
几乎所有响应式失效的起点，就是 <meta name="viewport"> 缺失或写错。不加这行，移动端浏览器会按桌面宽度（通常是 980px）渲染，再整体缩小显示，文字小到看不清，点击区域错位。
正确写法只有一句，别加多余属性：
<meta name="viewport" content="width=device-width, initial-scale=1">
-
width=device-width是关键，它让视口宽度匹配设备物理宽度（不是分辨率），否则max-width: 100%之类全白搭 - 去掉
user-scalable=no—— 屏蔽缩放是反体验的，还可能被 iOS Safari 忽略 - 别写
minimum-scale=1.0或maximum-scale=1.0，它们会干扰双击放大和辅助功能 - 如果项目要支持横屏 iPad 等宽屏设备，
width=device-width依然有效，不用额外判断
CSS 媒体查询里用 px 还是 rem？
用 px 写断点最稳妥。CSS 媒体查询里的 px 指的是 CSS 像素（逻辑像素），不是设备物理像素，所以 @media (max-width: 768px) 在 iPad、Surface、甚至高 DPI 手机上都行为一致。
- 别用
rem或em写媒体查询断点 —— 它们依赖根字体大小，而根字号可能被用户修改或 JS 动态重设，导致断点错乱 - 常见断点值：768px（平板竖屏）、1024px（平板横屏）、1200px（桌面窄屏），够用就别堆一堆
- 优先用
min-width而非max-width，更符合移动优先逻辑，避免层叠覆盖出问题 - 如果用到了
clamp()或流体排版，媒体查询仍是兜底手段，不能完全替代
图片在不同屏幕密度下模糊？
模糊主因是浏览器加载了低分辨率图，然后强行拉伸。解决它不靠 JS 适配，而靠 HTML 层的 srcset 和 sizes。
立即学习“前端免费学习笔记（深入）”；
一个典型写法：
<img src="cat-400.jpg"
srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 900px) 50vw, 800px"
alt="cat">
-
srcset提供多张图，400w表示该图原始宽度为 400 像素，浏览器据此结合设备 DPR 和布局宽度选最合适的 -
sizes告诉浏览器“这张图在不同视口下大概占多宽”，必须写准，否则srcset就形同虚设 - 别只靠
picture+source media切格式（如 webp），它不解决分辨率问题；srcset才是核心 - 构建时生成多尺寸图是刚需，手动维护三套图不现实；Webpack/Vite 插件或 CI 脚本得跟上
Flex/Grid 在老 Android 浏览器里突然不换行
Android 4.4 及更早版本的 WebView（以及部分国产壳浏览器）对 Flexbox 实现有严重 Bug：比如 flex-wrap: wrap 失效、flex-basis 解析错误、gap 完全忽略。Grid 更惨，基本不可用。
- 检测手段简单：
if ('flexWrap' in document.documentElement.style) {...}不可靠，得用实际渲染测试或 UA 特征检测 - 降级方案优先用
display: block+float或inline-block，虽然丑但稳定；现代写法用@supports (display: flex)包裹新布局 -
gap必须降级：Flex 用margin，Grid 用padding+margin负边距模拟，别指望 autoprefixer - 不要相信 “加个 prefix 就能跑” —— Android 4.x 的 flex 实现是独立分支，
-webkit-flex也救不了flex-wrap
