Retina显示优化
| 设备 | 设备像素比 | 所需图片 |
|---|---|---|
| 普通屏幕 | 1x | 1倍基准尺寸 |
| Retina（多数iPhone） | 2x | 2倍基准尺寸 |
| Retina HD（iPhone Pro Max等） | 3x | 3倍基准尺寸 |
| Android 高端机型 | 2.5–3x | 推荐3倍 |
如果展示一张CSS尺寸为100×100px的图片，需准备200×200px（@2x）和300×300px（@3x）的版本。
<!-- 使用 srcset -->
<img src="image.jpg"
srcset="image@2x.jpg 2x, image@3x.jpg 3x"
width="200" height="200" alt="...">
<img src="image.jpg"
srcset="image@2x.jpg 2x, image@3x.jpg 3x"
width="200" height="200" alt="...">
<!-- 使用 picture 元素 -->
<picture>
<source srcset="image@2x.webp 2x" type="image/webp">
<img src="image.jpg" srcset="image@2x.jpg 2x" alt="...">
</picture>
<picture>
<source srcset="image@2x.webp 2x" type="image/webp">
<img src="image.jpg" srcset="image@2x.jpg 2x" alt="...">
</picture>
/* CSS 背景 Retina 适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url('logo@2x.png'); background-size: 100px 50px; }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url('logo@2x.png'); background-size: 100px 50px; }
}