CSS pixels and solutions to different mobile screen adaptation issues

Pixel

Resolution

What we usually call monitor resolution actually refers to the resolution set by the desktop, not the physical resolution of the monitor. It’s just that LCD monitors have become mainstream now. Since the display principle of LCD is different from that of CRT, the display effect is best only when the desktop resolution is consistent with the physical resolution. Therefore, our desktop resolution is almost always consistent with the physical resolution of the monitor.

UI draft pixels

The pixels of the UI draft refer to the physical pixels. For example, 750px is the physical pixel of the UI design draft we received.

Front-end pixels

As long as the logical pixels of the two screens are the same, their display effects will be the same. That is, the px in the CSS world is the same, and the display effect on screens of the same physical size is the same

So what is the relationship between them when they are actually displayed on the screen?

As shown in the figure below, when we set the CSS pixel (width: 2px; height: 2px) of an element on a web page, it will eventually occupy four physical pixels on a display with dpr=1, and 16 physical pixels on a display with dpr=2. From this, we can conclude that the physical size of CSS pixels is consistent on different screens, but the number of physical pixels corresponding to one CSS pixel is different.

Rem adaptation solutions for different screens

<!-- m station mobile terminal adaptation js -->

  // Adapt to physical pixel width 750 1rem=100px   
  // clientWidth (actual logical pixel) / 375 (reference benchmark logical pixel) = fontSize (actual 1rem pixel value) / 100 (reference 1rem logical pixel value)
  ;(function(win, doc){
    function change(){
        doc.documentElement.style.fontSize=100*doc.documentElement.clientWidth/375+'px';
    }
    change();
    win.addEventListener('resize', change, false);
  })(window, document);
  // In this way, we can calculate the actual value of 1rem under different logical pixels. // In actual work, if the UI design draft width is 750px, then we need to divide the measured width by 200
  // When we open the console to check the distance between elements, it is half of the distance on the design draft. The physical pixel of the design draft is 2px, which corresponds to the logical pixel 1px.
  // Our company's current design drafts are all on Blue Lake. The width is standard 375. So we only need to divide the measured width by 100 to get the actual width in rem.

  // Attachment: Of course there are other adaptation schemes, but the rem principle is the same, unless the rem scheme is not adopted

Why do Apple phones need double or triple images?

Take 2x screen as an example

The original 2*2 pixel image is composed of 4*4 pixels on a 2x screen, so the pixels that need to be drawn will look for similar ones in the surrounding area, so there is a blur problem. In order to display high-definition images at work, Apple's double image is generally used.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.