Retina屏背景图清晰需用@2x图+media query+background-size：准备icon.png与icon@2x.png，通过(-webkit-min-device-pixel-ratio: 2)或(min-resolution: 2dppx)切换，并设background-size为逻辑尺寸。
background-image怎么写才能在Retina屏显示清晰
直接用background-image设一张普通尺寸图，在Mac或iPhone上会发虚。根本原因是CSS像素和设备物理像素不一致——Retina屏1个CSS像素对应2×2甚至3×3个物理像素，原图没足够细节就只能插值拉伸。
解决方法不是“换高清图”就完事，得配合background-size和媒体查询精准控制：
- 准备两版图：
icon.png（1x）和icon@2x.png（2x，宽高都是1x的2倍） - 用
min-resolution: 2dppx或(-webkit-min-device-pixel-ratio: 2)做媒体查询兜底，老Safari必须用后者 -
background-size必须显式设为原图逻辑尺寸，比如图是100×100px但用了@2x版本，就得写background-size: 50px 50px
示例：
div {
background-image: url(icon.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
div {
background-image: url(icon@2x.png);
background-size: 50px 50px; /* 关键：否则会放大成200×200 CSS像素 */
}
}img标签srcset属性为什么有时没生效
srcset本身没问题，但失效常是因为忽略了sizes或HTML解析顺序。浏览器根据sizes算出目标宽度后，才从srcset里选最匹配的图源；没写sizes时默认按100vw算，跟实际布局对不上就容易选错。
立即学习“前端免费学习笔记（深入）”；
常见坑点：
- 响应式布局中
img父容器宽度不确定时，sizes必须写具体，比如sizes="(max-width: 768px) 100vw, 50vw" -
srcset里的宽度描述符（如400w）指的是图片**原始文件宽度**，不是CSS渲染宽度 - 不要混用
src和srcset指向同一张图，浏览器可能忽略srcset
正确写法示例：
<img src="photo-400.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"
alt="示例">SVG作为背景图是否天然适配Retina
是，但有个前提：SVG文件里不能有<image></image>嵌入位图，也不能用background-image引用外部PNG/JPG。只要纯矢量路径、渐变、文字，缩放再大都清晰。
不过要注意几个实际限制：
- 用
background-image: url(icon.svg)时，确保服务器返回Content-Type: image/svg+xml，否则部分浏览器拒绝渲染 - 内联SVG（
data:image/svg+xml,base64）要URL编码，特别是#、这些符号，否则解析失败 - 如果SVG里用了
px单位定义画布尺寸（如width="16px"），在高分屏下可能被错误缩放，建议改用无单位或em
伪元素::before/::after里的图片怎么适配
伪元素没法直接写srcset，只能靠background-image + 媒体查询。但这里有个隐蔽问题：伪元素默认display: inline，没有宽高，背景图即使加载了也看不见。
必须手动设置：
-
content: ""（否则伪元素不渲染） -
display: block或inline-block -
width和height（用em或rem更稳妥，避免固定px在高分屏下失真） - 背景图尺寸用
background-size: contain或具体值，别用100% 100%——那会强行拉伸
示例：
.card::before {
content: "";
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url(icon.svg);
}
@media (-webkit-min-device-pixel-ratio: 2) {
.card::before {
background-image: url(icon@2x.png);
background-size: 1.5em 1.5em; /* 必须同步调整 */
}
}真正麻烦的是混合场景：比如一个组件同时用img、background-image和SVG图标，三者适配逻辑不统一，很容易漏掉某一处。这时候别依赖“差不多”，得逐个检查渲染后的实际像素比——打开Chrome DevTools，右键检查元素，看Computed里background-image加载的是哪张，img的currentSrc是什么，再对比设备像素比。这才是最实在的验证方式。
