retina屏字体发虚主因是设备像素比未被css渲染引擎感知，1px对应多物理像素导致模糊；需用rem动态适配、transform模拟物理像素线、启用font-smoothing优化。
viewport 中 initial-scale=1.0 在 Retina 屏上为何字体仍发虚
不是缩放问题，而是设备像素比（window.devicePixelRatio）没被 CSS 渲染引擎“感知”到。浏览器默认按逻辑像素渲染，但高 DPR 设备（如 iPhone、MacBook Pro）物理像素密度翻倍，1px 实际画了 2×2 或 3×3 像素，导致细线/小字边缘模糊。
解决办法不是调 initial-scale，而是让 CSS 布局单位能响应 DPR：
-
rem配合 JS 动态设置document.documentElement.style.fontSize，例如：按clientWidth / 375 * 16计算基础字号（以 iPhone SE 宽度为基准），再乘以window.devicePixelRatio补偿； - 避免用
border: 1px solid #000，改用transform: scaleY(0.5)+origin模拟物理像素线； - 字体启用
-webkit-font-smoothing: antialiased和text-rendering: optimizeLegibility，对 macOS/iOS 有效。
srcset 与 sizes 组合时常见失效场景
写了 srcset 却还是加载低分辨率图，大概率是 sizes 值没匹配当前布局上下文。浏览器不会“猜”你想要哪张图，它只按 sizes 提供的宽度提示 + 当前视口宽度 + DPR 查找最接近的 srcset 项。
典型错误：
-
sizes="(max-width: 768px) 100vw, 50vw"，但实际容器在移动端被 flex 压缩到300px宽 —— 浏览器仍按100vw（即 375px）选图，可能选中400w而非更合适的320w； - 漏写单位：
srcset="img@1x.jpg 1x, img@2x.jpg 2x"比srcset="img@1x.jpg 1, img@2x.jpg 2"更可靠，后者在部分 Android WebView 中被忽略； - 背景图无法用
srcset，必须靠@media+background-image切换，且要显式写background-size: cover防止拉伸失真。
媒体查询断点该不该按设备型号写（如 min-width: 1200px）
不该。高分辨率设备（如 Surface Pro、MacBook Air）屏幕宽常超 1200px，但用户未必全屏浏览；而某些折叠屏展开后达 2200px，却因内容密度低反而需要更紧凑的布局。
真正该依据的是内容流——也就是“什么时候文字开始撑不开两栏”“何时卡片间距显得过大”。推荐做法：
- 先写移动样式，然后用
@media (min-width: 48em)（即 768px）切入平板，@media (min-width: 62em)（992px）切桌面； - 对 DPR ≥ 2 的设备加一层判断：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)，仅用于替换图标字体或提升阴影细节，不改结构； - 避免嵌套过多媒体查询，CSS 重排开销会随断点数量指数上升，尤其在低端 Android 上明显卡顿。
Flexbox/Grid 在高 DPR 下的像素对齐异常
用 flex: 1 或 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) 时，元素宽度常出现 0.333…px 这类非整数像素值。DPR=2 时，浏览器需把 0.333px 渲染成 0.666 物理像素 —— 实际显示为 1px 或 0px，造成间隙错位或边框抖动。
稳定方案只有两个：
- 强制容器用
overflow: hidden截掉 sub-pixel 溢出（适合卡片网格、轮播图等有视觉边界的场景）； - 用
calc()替代纯比例分配，例如width: calc((100% - 20px) / 3)（假设 20px 是总 gap），确保结果可被 DPR 整除； - 对关键分隔线/边框，用
box-shadow: 0 0 0 1px #eee替代border，阴影不受 sub-pixel 影响。
高分辨率适配真正的难点不在“怎么让图变清晰”，而在“怎么让布局不因物理像素和逻辑像素的撕裂感而失稳”。多数问题不会报错，只在特定设备上轻微错位或文字发虚，很容易被当成设计问题忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
