The use of @ 2x graph and @ 3x graph in mobile terminal project

Time:2020-6-30

In the process of mobile terminal development, we need to modify the size of the icon according to the DPR of the mobile phone

If the device pixel is greater than or equal to 2, double image is used

Define a method in stylus

bg-image($url)
   /\*If the device pixel is greater than or equal to 2, double image is used\*/
      background-image: url($url + "@2x.png") 
      background-repeat no-repeat
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
       /\*If the device pixel is greater than or equal to 3, double image is used\*/
        background-image: url($url + "@3x.png")
        background-repeat no-repeat

-WebKit – min – device – pixel – ratio: 3 means that the smallest color of the display screen is 3 times