根本原因是高 dpi 设备上 css 像素映射多物理像素，而图片/字体资源分辨率不足致插值模糊；须用 srcset+sizes 提供多倍图、rem+clamp() 控制字号、优先 svg、禁用系统模糊修复并真机验证。
为什么低分辨率下 CSS 响应式网页看起来模糊
根本原因不是 CSS 写错了，而是浏览器在高 DPI 设备（如 Retina 屏、Windows 缩放 125%/150%）上渲染时，把 1px 的 CSS 像素映射到了多个物理像素，而你提供的图片或字体资源本身分辨率不足，导致浏览器被迫插值放大——结果就是发虚、边缘糊、文字锯齿。
用 srcset 和 sizes 提供多倍图
仅靠 width: 100% 或 max-width: 100% 无法解决图片模糊。必须让浏览器知道“这张图在 2x 屏幕下该用哪张更高清的源”。
-
img标签必须同时提供srcset（候选图列表）和sizes（断点逻辑），否则浏览器默认只加载src - 常见错误：只写
srcset不写sizes，浏览器无法判断视口宽度与图宽关系，大概率仍选低分图 - 推荐格式：
@@##@@
字体模糊：避免 transform: scale() 和强制缩放
用 transform: scale(0.8) 或 zoom 缩小文字来适配小屏，是模糊主因之一——浏览器会对已渲染的文本做二次重采样。
- 改用响应式
font-size单位：rem+clamp()是目前最稳妥方案 - 错误写法：
font-size: 14px; transform: scale(0.9);→ 文字先按 14px 渲染再缩放，必然糊 - 正确写法：
body { font-size: clamp(14px, 2.5vw, 18px); }让浏览器原生计算字号，不触发重绘缩放 - 禁用 Windows 中的“允许 Windows 尝试修复应用模糊”（设置 > 显示 > 图形设置 > 高级图形设置），它会全局劫持渲染流程
SVG 和 icon font 比 PNG 更可靠
所有需要清晰缩放的图标、Logo、装饰性图形，优先用 SVG；若必须用位图，至少提供 2x 版本并配合 srcset。
立即学习“前端免费学习笔记（深入）”；
- SVG 本质是矢量，任意缩放无损，且体积通常比同效果 PNG 小
- 不要把 SVG 当作
<img src="logo-1x.png" srcset="logo-1x.png 1x, logo-2x.png 2x, logo-3x.png 3x" sizes="(max-width: 768px) 100vw, 300px" alt="logo">引入后又设width: 100%—— 这可能触发降级 rasterization；应内联或用<svg></svg>标签直接写 - icon font 已逐步淘汰，但若仍在用，确保其字体文件包含足够 hinting 信息，且未被 CSS
text-rendering: optimizeLegibility过度干预
