请问图的1倍2倍3图该怎么根据不同的手机去适配？

Question

请问ui给的是安卓的设计图，让用安卓设计图去适配苹果，图的1倍2倍3图该怎么根据不同的手机去适配，是用dpr吗？怎么去写呢？

Answer 1

.bg-image(@url) {
  background-image: url('@{url}@1x.png');
  @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    background-image: url('@{url}@2x.png');
  }
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url('@{url}@3x.png');
  }
}

1倍图的手机应该很少有了

Answer 2

H5页面进行适配，如果要求比较高，使用媒体查询 @media，设计图需要提供多种类型的；
按照你的描述，要求没这么高，你直接使用rem进行布局就OK，一张设计图，根据分辨率的不同自动改变宽高