retina屏图片模糊的真正原因是srcset的x描述符未生效，浏览器未加载@2x图而仅拉伸1x图；必须用1x/2x而非w描述符，且需验证构建产物中高分图存在并http可访问。
srcset + x 描述符没生效，图片还是模糊
浏览器根本没加载 @2x 图，只是把 1x 图拉伸渲染——这是 Retina 屏模糊的真正原因，不是 CSS 写得不够“高清”。
-
srcset必须用1x/2x描述符，写成"icon-100.png 100w, icon-200.png 200w"不会响应 DPR，只响应视口宽度 -
src是 IE 全系和旧 Android WebView 的兜底项，不能省；否则不支持srcset的环境直接空白 - 构建后要手动验证
icon-200.png确实存在于dist/目录且 HTTP 返回 200，Vite/Webpack 默认不解析srcset中的路径 - 安卓 WebView 对
x支持极不稳定，必须搭配sizes="100vw"（哪怕固定宽）才能触发高 DPR 加载
background-image 用 image-set() 仍模糊
image-set() 只控制背景图资源选择，不解决尺寸错位问题；即使加载了 @2x 图，若没设 background-size，它就按物理像素渲染，直接撑大两倍。
- 顺序必须是：
background-image: url("icon.png"); background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);——后者覆盖前者 - 必须显式声明
background-size: 24px 24px（按设计稿逻辑尺寸），否则icon@2x.png以 48×48 像素渲染，视觉上放大一倍 -
image-set()不支持w描述符，混写如"icon.png" 800w会导致整个函数静默失效，浏览器回退到第一层url() - 伪元素
::before中使用时，需同时满足：content: ""+display: block+ 显式width/height，否则无渲染区域
SVG 图标在 Retina 下偏移或发虚
SVG 本身矢量无损，但 HTML 容器和 CSS 渲染行为会破坏对齐精度，尤其在 sub-pixel 渲染场景下。
- 行内
<svg></svg>默认display: inline，受vertical-align: baseline影响下沉；统一设为display: inline-block或包裹flex容器 - 删掉 SVG 标签上的
width和height属性，只保留viewBox；固定宽高会触发浏览器插值缩放，导致边缘模糊 - 加
shape-rendering: crispEdges或image-rendering: -webkit-optimize-contrast提升锐度，但仅对线条/像素风有效，照片类请保持auto - Tailwind 或 CSS Reset 可能注入
image-rendering: smooth，需用!important覆盖或检查 computed styles
picture 元素里 media 查询没切换图像
<picture></picture> 的 media 属性匹配的是视口宽度，不是设备像素比；想按 DPR 切换，必须用 srcset + x，media 只管布局断点。
-
<source media="(min-width: 768px)" srcset="hero-desktop.jpg"></source>—— 这个media控制的是“什么尺寸下显示这张图”，和“用哪张分辨率”无关 - 同一
<source></source>内可叠加srcset：<source media="(min-width: 768px)" srcset="hero-1200.jpg 1x, hero-2400.jpg 2x"></source> - 不要指望
<source></source>自动 fallback 到下一个；浏览器严格按顺序匹配，第一个media为 true 就停，后续不执行 - Chrome DevTools 的 Network 标签页里看实际加载的图名，比肉眼判断是否“清晰”更可靠
srcset 和 image-set() 都只是纸面配置。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
