Retina屏模糊的根本原因不是图不够大，而是CSS像素与物理像素没对齐——尤其在border、line-height、transform缩放等场景下，1px线会渲染成1.5个物理像素，直接糊。
为什么1px边框在Retina屏上变粗或发虚
浏览器对 border: 1px solid #000 的处理逻辑是：按当前设备的 window.devicePixelRatio 把 1 CSS px 映射到 N 个物理像素。dpr=2 时，它本该画 2×2 像素的实心块，但很多渲染引擎（尤其是 Safari iOS）会做抗锯齿插值，结果边缘半透明、中间发灰。
- 不写
transform: scale(0.5)强制降采样，就别指望“视觉上看起来是1px” - 用
border-image或伪元素 +background模拟单像素线更可控 - Chrome 120+ 和 Safari 17+ 对
border-width: 0.5px支持变好，但需配合device-pixel-ratio媒体查询降级
line-height 和 font-size 在 dpr=2/3 下的错位问题
文字本身不会糊，但行高和字体大小若用固定 px 值，会导致基线（baseline）在高分屏上偏移——因为字体度量（ascent/descent）是按物理像素计算的，而 line-height: 24px 被强行映射成 48 物理像素高度，留白分布失衡，视觉上“飘”或“压底”。
- 改用
rem或无单位line-height: 1.5，让浏览器按实际字体度量自动对齐 - 避免
font-size: 16px; line-height: 24px这种绝对组合；换成font-size: 1rem; line-height: 1.5 - 如果必须控制精确行高（如设计稿标注），用
@media (-webkit-min-device-pixel-ratio: 2)单独调line-height: 1.48补偿
transform: scale() 后元素内容模糊的真正原因
对一个 div 写 transform: scale(0.5) 并不能让内部文字变清晰——它只是把整个图层缩小后放大渲染，相当于先画 200×200px 再拉伸到 400×400px，所有子元素都经历一次双线性重采样。
- 要真清晰，得让原始 DOM 尺寸 × dpr 后再缩放，比如目标显示为 200×200px，则 DOM 设为 400×400px，再
transform: scale(0.5) - Canvas 绘图必须手动适配：
canvas.width = canvas.offsetWidth * window.devicePixelRatio，否则所有 stroke 都糊 - SVG 元素不受此影响，但内嵌
<image></image>仍需按 dpr 提供高清源
最易被忽略的是：伪元素、box-shadow、outline 这些非内容区域，在高分屏下同样受 dpr 影响，且无法用 srcset 或 image-set() 修复——它们只能靠媒体查询或 JS 动态注入样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
