Pixel knowledge

###1. Pixel density (DPI, PPI) is the number of pixels per inch of the screen. The greater the pixel density, the richer the details of the display screen.像素密度=√{(长度像素数^2+宽度像素数^2)}/ 屏幕尺寸。

###2, Retina screen is retina screen, Apple registered the naming method, referring to the screen with PPI value greater than 320 is Retina screen

###3. The physical pixel device can control the smallest unit of display. We can regard these pixels as points on the display, which cannot be changed artificially. Their value determines the quality of the rendered image on the screen. It can be obtained through window.screen.width/heightproperties.

###4. CSS pixel is the concept of web programming. It is a device-independent unit for logically measuring pixels. That is to say, the CSS pixel unit we use in web page layout is abstract rather than actual existence. of. Browser window dimensions are measured in CSS pixels: window.innerwidth/innerheight.

###5. Device-independent pixel (DIP, device-independent pixel, density-independent pixel) A device-independent unit for logically measuring pixels. That is, CSS pixels, which can be converted to physical pixels. Therefore, there is a certain correspondence between physical pixels and device-independent pixels. This new unit is called pt (point) on ios devices and DIP (Device Independent Pixel) or dp on Android devices.

###6, device pixel ratio

设备像素比 = 物理像素/设备独立像素 // 在某一方向上,x方向或者y方向In the standard case one device independent pixel (CSS pixel) corresponds to one physical pixel. window.devicePixelRatioYou can get the pixel ratio of the device through JavaScript . Check the device pixel ratio of each model http://devicepixelratio.com/

####Double image: When this ratio is 1:1, use 1 physical pixel to display 1 CSS pixel. ####Double Image: When this ratio is 2:1, 1 CSS pixel is displayed using 4 (2 2) physical pixels. ####Triple Image: When this ratio is 3:1, 1 CSS pixel is displayed using 9 (3 3) physical pixels.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325809905&siteId=291194637