The site www.w3cplus.com/mobile/lib-… In fact, it has been very detailed, and then on this basis for further analysis
IP6, for example
Individual pixels are Windows, independent of device density. Device pixels are physical pixels, related to DPR. The device width and height of the Phone6 is 375pt by 667pt, while its DPR is 2 and device pixels (physical pixels) are 750pt by 1334pt.
By introducing flexible. Js, font size and DPR are added to the HTML root directory
If a UI image is 750px, then 1rem=75px, with a baseline of 75 to calculate rem
When a UI block is 100px by 100px and converted to REM via PostCSS or Px2REM:
100/75 = 1.33333333 rem
So 100px * 100px => 1.33333333rem * 1.33333333rem
In the browser, the UI block sizes are actually different with different DPR
1.33333333rem*35.7=49.9999999px
So the final size of the UI block displayed on a device with DPR =1 is zero
49.9999999 px * 49.9999999 px
2, DPR = 2:1.33333333rem*75=100px
That is 100 px x 100 px
3. When DPR = 3:1.33333333 REM *112.5=150px
That is 150 px x 150 px