I would like to ask the figure 1 times 2 times 3 how to adapt according to different mobile phones?

I would like to ask ui to give the Android design diagram, let the Android design map to adapt to Apple, map 1 times 2 times 3 map how to adapt according to different phones, is it using dpr? How to write it?

Feb.09,2022


.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');
  }
}

Mobile phones with twice the figure should be rare

clipboard.png


H5 page to adapt. If the requirements are relatively high, you need to provide multiple types of media query @ media, design drawings.
according to your description, if the requirements are not so high, you directly use rem for layout to OK, a design drawing, and automatically change the width and height according to the resolution

.
Menu