移动端项目中 @2x 图 和 @3x 图 的解决方案

设计师经常会提供给我们如：bg@2x.png、bg@3x.png这样的同样图片不同比例的图给前端

我们知道，对于不同的移动设备而已，他们的dpr（devicePixelRatio）可能是1、2、3也可能带小数

如果dpr与图片的比例相差太大，会造成图片失真（因为不同dpr在同样css像素下能展示的像素点不同）

那么，在移动端，我们如何处理2x图和3x图呢？

有以下2种写法：

1、less、scss预编译器中的写法

index.scss

@mixin bg-image($url) {
  background-image: url($url+'@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url+'@3x.png');
  }
}

.head_img {
  height: 2.4rem;
  padding: 0 $commonSize036;
  background-size: 100%;
  @include bg-image('../../assets/images/bg3');
}

2、js组件中的写法

js组件中的写法主要是应用于类似img标签的src引用

assets/images/index.js

let tips;
if (window.devicePixelRatio <= 2) {
  tips = require('./pc-tips@2x.png');
} else {
  tips = require('./pc-tips@3x.png');
}

export { tips };

index.js

import { tips } from '../../assets/images';

<img className={styles.tips} src={tips} />