小程序如何处理2x,3x图?

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
}

评论

还没有评论...留下你的评论!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar