1px位图放大失真本质是浏览器对固定像素网格强行插值，非DPR问题；应改用SVG、CSS渐变或足够大的位图源，禁用image-rendering: pixelated等无效方案。
移动端 CSS 中的“1 像素图片放大失真”，本质不是图片被放大了，而是你用一张 1px 宽高的位图（比如 1x1.png）当背景或装饰元素，再用 background-size 或 width/height 拉伸它——浏览器只能靠插值算法“猜”中间像素，必然糊。这不是 DPR 问题，是位图先天不适合缩放。
为什么 1px 图片一放大就糊
位图由固定像素网格构成，1×1 就只有 1 个颜色值。CSS 拉伸到 20×20 时，浏览器必须生成 399 个新像素，靠双线性插值“平滑过渡”，结果就是发灰、边缘发虚、色块不干净。SVG 或字体图标没这问题，因为它们是矢量描述。
- 常见错误场景：
background-image: url("dot.png"); background-size: 20px 20px;——dot.png真是 1×1 的 PNG 吗？还是 PS 里“放大画布”硬撑出来的？后者更糊 - 即使 DPR=1（普通屏），1px 位图拉伸照样失真；DPR 只影响物理像素映射，不改变插值逻辑
-
image-rendering: pixelated对这种极端缩放无效：它只在整数倍放大时保留块状感，而 1→20 是非整数倍，浏览器仍会 fallback 到双线性
别用 1px 位图，改用 SVG 或 CSS 渐变
真正轻量、不失真的方案是绕开位图。1px 装饰需求（如分隔线、点阵、底纹）几乎都能用纯 CSS 替代：
- 单点装饰：用
background: radial-gradient(circle, #000 1px, transparent 1px); background-size: 4px 4px;—— 控制半径和间距，无缩放、无请求 - 细线分隔：直接写
border-bottom: 1px solid #eee;，配合transform: scaleY(0.5)实现物理 0.5px（见下一条） - 斜线/网格背景：用
repeating-linear-gradient，例如background: repeating-linear-gradient(45deg, #000, #000 1px, transparent 1px, transparent 2px); - 如果必须用图片，改用 SVG Data URL：
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");—— SVG 1×1 可无限缩放，且体积比 PNG 小
真要用位图，至少保证最小缩放比 ≥ 2
如果设计规范强制要求某张“1px 高”的纹理图（比如带噪点的底纹），那必须让它原始尺寸足够大，避免浏览器强行插值：
立即学习“前端免费学习笔记（深入）”；
- 假设最终显示为
height: 2px，那原图至少做 2×2（不是 1×1）；显示为20px，原图建议 40×40 或 60×60 —— 给浏览器留出整数倍缩放空间 - 用
image-rendering: crisp-edges强制锐化（Chrome/Firefox 支持，Safari 15.4+ 支持）：background-image: url("texture@2x.png"); image-rendering: crisp-edges; - 禁用平滑缩放（仅限 Chrome）：
-webkit-image-rendering: pixelated;，但注意它对小图拉伸效果有限，优先级低于crisp-edges - 绝对不要把
srcset用在 1px 图上：<img src="dot.png" srcset="dot@2x.png 2x">没意义，dot@2x.png若仍是 1×1，放大后还是糊
iOS Safari 下的特殊坑：background-size 缩放失效
在 iOS 15–16 的某些 WebView 场景中，对极小尺寸背景图（尤其 background-size: 2px 2px）应用 transform: scale() 可能触发渲染 bug，表现为图消失或错位。这不是通用问题，但一旦遇到很难排查。
- 规避方式：不用
transform缩放背景图，改用background-size直接设目标尺寸（如background-size: 4px 4px） - 若必须动态控制，用 JS 读取
window.devicePixelRatio后，通过 class 切换预设的background-size值，而非实时计算 transform - 兜底检测：加
background-color: #f00;，如果红色背景透出来，说明图片加载失败或渲染被跳过 —— 这比模糊更容易定位
真正难的不是选哪个方案，而是意识到“1px 位图”这个出发点本身就有问题。位图适合内容图像，不适合装饰性几何图形。只要把思维从“怎么拉伸一张小图”切换到“怎么生成一个可缩放的图形”，大部分失真问题就不存在了。
