0520 Day Focus: css pixels, device pixels, and DPR

1, device independent pixels: the physical pixels of the device screen, the number of physical pixels of any device is fixed

2, css pixels (css pixels): Also known as logical pixels, is created for Web developers, in CSS and JavaScript used in an abstract layer

3. The ratio of device pixels to CSS pixels when the device pixel ratio DPR (devicepixelratio) is the default scaling to 100%

In fact, the CSS pixel at this point corresponds to the ideal viewport to be mentioned later, and its corresponding JavaScript attribute is Screen.width/screen.height

For device pixels, there is a corresponding JavaScript attribute than DPR Window.devicepixelratio

Take iphone5 as an example, the iphone5 CSS Pixel is 320PX*568PX,DPR is 2, so its device pixel is 640px*1136px

0520 Day Focus: css pixels, device pixels, and DPR