移动端根据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适配不同图片的地方引入这段代码,使用的时候


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




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

你可能感兴趣的:(移动端根据dpr适配不同图片)