移动端根据dpr适配不同图片

以vue中使用stylus为例

mixin.stylus

bg-image($url)
  background-image url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
    background-image url($url + "@3x.png")

同样的，在需要根据dpi适配不同图片的地方引入这段代码,使用的时候

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin.styl';
  .star
    bg-image('star48_on')
</style>

这样就可以了
适配的是这两张图片，注意图片名字：

star48_on@2x.png
star48_on@3x.png

具体的要怎么适配，对于不同的需求当然还需要对代码进行适当修改