鍍金池/ 問答/HTML/ 小程序怎么處理2x，3x圖？

小程序怎么處理2x，3x圖？

在平時的css里面我們可以通過媒體查詢來處理不同dpi下的圖片

不知道在小程序里應該怎么處理？
小程序的image里面是沒有srcset這個屬性的，要不也可以通過這個屬性解決問題..

回答
編輯回答
帥到炸

問題解決：

1.wxss的解決辦法（一般使用這種方法）：

@media  (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .imgTest{
    background: url(../images/2x.png) no-repeat; 
  } 
} 
 @media  (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
  .imgTest{
    background: url(../images/3x.png) no-repeat; 
  } 
}

2.js上的解決辦法：
獲取設備的設備像素比：

//獲取設備像素比
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}

然后在onshow的時候獲取，把對應的設備像素比對應在不同的image路徑上

2017年2月19日 17:00