在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

在平時(shí)的css里面我們可以通過(guò)媒體查詢來(lái)處理不同dpi下的圖片

不知道在小程序里應(yīng)該怎么處理？
小程序的image里面是沒(méi)有srcset這個(gè)屬性的，要不也可以通過(guò)這個(gè)屬性解決問(wèn)題..

回答
編輯回答
帥到炸

問(wèn)題解決：

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上的解決辦法：
獲取設(shè)備的設(shè)備像素比：

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

然后在onshow的時(shí)候獲取，把對(duì)應(yīng)的設(shè)備像素比對(duì)應(yīng)在不同的image路徑上

2017年2月19日 17:00