移动端根据不同DPR加载大小不同的图片

1.首先创建mixin.styl文件代码如下：

bg-image($url)  // 创建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")


2.编写html代码


  
  




注释

  bg-image('brand')中 brand为/header/[email protected] || [email protected]的图片名

/header/[email protected] || [email protected]为文件路径


此处使用stylus语法

 转自https://blog.csdn.net/qq_38229202/article/details/69676697

转载于:https://www.cnblogs.com/anxiaoyu/p/9306334.html