width=device-width无法解决dpr导致的模糊问题，需协同srcset/sizes、rem动态缩放、image-set或picture模拟背景，并确保源图高分辨率与新格式。
为什么 width=device-width 在高 DPR 设备上还不够
单纯设置 <meta name="viewport" content="width=device-width, initial-scale=1"> 只能控制布局视口宽度和初始缩放，但无法解决「CSS 像素」与「物理像素」错位导致的模糊问题。比如 iPhone 15 Pro 的 DPR 是 3，1 个 px 实际渲染占 3×3 个物理像素——若图片源只有 1x 尺寸，浏览器会拉伸填充，结果就是发虚。
关键不是“页面能不能缩放”，而是“内容能否按设备真实像素密度精准呈现”。这需要从资源供给、单位选择、渲染控制三方面协同处理。
srcset + sizes 必须配对使用，否则等于没写
只写 srcset 不写 sizes，浏览器缺乏上下文判断依据，大概率 fallback 到 src 或选错尺寸；只写 sizes 不写 srcset，则完全无效。
-
srcset提供的是“有哪些图”（带宽度描述符，如image-800.jpg 800w） -
sizes描述的是“在当前断点下这张图会显示多宽”（如(max-width: 768px) 100vw, 50vw），浏览器据此换算出所需 DPR 下的等效像素值，再匹配srcset中最接近的资源 - 漏掉任一环，高清适配就失效；尤其注意
sizes里的vw单位必须和实际布局中该图片容器的宽度逻辑一致，否则预判失准
用 rem 配合根字体动态缩放，比直接写 px 更可靠
在高 DPR 设备上，固定 px 字体或边距容易显得过小（视觉上被“压缩”）。改用 rem 并通过 JS 动态设置 document.documentElement.style.fontSize，可让所有相对单位随 DPR 自适应缩放。
常见做法是：
- 基础设定：
html { font-size: 16px; } - 检测 DPR 后调整：
document.documentElement.style.fontSize = 16 * window.devicePixelRatio + 'px'; - 后续所有
font-size、padding、margin都用rem，例如font-size: 1.2rem;—— 这样在 DPR=2 的设备上，1.2rem 实际就是 38.4px 物理像素，清晰且比例协调
注意：不要在 CSS 里直接写 font-size: calc(16px * device-pixel-ratio)，CSS 不支持运行时读取 DPR；必须靠 JS 注入。
background-image 的高清方案不能只靠 background-size
CSS 的 background-size: cover 或 contain 只控制裁剪/缩放行为，不解决资源分辨率问题。高 DPR 下背景图照样模糊。
真正可行的路径只有两条：
- 用
@supports (background-image: image-set())+image-set()（兼容性限于 Chrome/Firefox/Safari 16.4+）：background-image: image-set("bg-1x.jpg" 1x, "bg-2x.jpg" 2x, "bg-3x.jpg" 3x); - 降级方案：用
<picture></picture>包裹一个position: absolute的<img>模拟背景，再用z-index和object-fit控制铺满，这样就能完整复用srcset/sizes逻辑
最容易被忽略的是：哪怕用了 image-set()，如果提供的 2x 图仍是 72dpi 的 JPEG，依然糊——高清适配的前提是「源图本身够大、够清晰、够新格式（WebP/AVIF）」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
