3. Pixel correlation

3.1 Physical Pixel/Device pixel

  • Device pixel/physical pixel is a unit of length

  • The physical pixel corresponds to a tiny physical component in the display device

  • Device pixels are a parameter on a phone’s screen that is determined by the phone’s manufacturer. For example, the IPhone 6 has 750 x 1334 physical pixels

3.2 Device independent pixel/device independent pixel

A device-independent pixel (also known as a density-independent pixel) can be thought of as a point in a computer coordinate system that represents a virtual pixel (such as a CSS pixel) that can be used by a program and then converted into a physical pixel by the relevant system

Device-independent pixel (DIP), also called device-independent pixel, is a unit of length measurement.

Device-specific pixels are also a parameter of the phone’s screen, determined by the phone’s manufacturer. The IPhone 6, for example, has 375 by 667 pixels per device

A device-independent pixel can be thought of as a point in a computer coordinate system that represents a virtual pixel that can be used programmatically.

  • One device-independent pixel under the normal screen equals one physical pixel
  • One device-independent pixel under the HD screen is equal to N physical pixels
The Retina screen

Retina is a display standard introduced by Apple in 2010, which compresses more pixels into a single screen to achieve higher resolution and improve the smoothness of the display.

The advent of device-independent pixels makes it possible to display normal-size elements even under a high-resolution screen, with code unaffected by the device.

Click here to see more screen pixel parameters for several phones

model Equipment pixel Device independent pixel
IPhone 3GS 320 * 480 320 * 480
IPhone 4 / 4s 640 * 960 320 * 480
IPhone 5 / 5s 640 * 1136 320 * 568
IPhone 6 / 7 / 8 750 * 1334 375 * 667
HUAWEI P10 1080 x 1920 360 x 640
IPhone X 1125 * 2436 375 * 812

3.5 Device Pixel Ratio (DPR)

  • Device pixel ratio (DPR) defines the relationship between physical pixels and device-independent pixels
  • In one directionDevice physical pixels 和 Device independent pixelThe proportion of
  • Device pixel ratio = physical pixels/device-independent pixels (in x or Y direction)

Rem is a relative unit of font size based on the root element of the page (the HTML body element)

PPI: can be understood as the display density of the screen

A: What’s your Resolution

window.devicePixelRatio
Copy the code

The role of pixel ratio

The program can show different pictures according to the pixel ratio, to achieve a clear display of the effect of the web page.

@media (-webkit-min-device-pixel-ratio: 2) {
         #box{
             background-image: url('./image/[email protected]'); }}@media (-webkit-min-device-pixel-ratio: 3) {
         #box{
             background-image: url('./image/[email protected]'); }}Copy the code

Not all images will do this, just those images and ICONS needed for the layout of the page

3.3 CSS Pixels/Logical pixels

A CSS pixel is a unit of length used in the CSS language. The unit is px.

  • CSS pixels cannot be directly converted to real-world units of length
  • CSS pixels are used to control the size and position of elements in CSS and JS

3.4 Bitmap pixels

3.4.1 Bitmap and vector map

  • Bitmap image, also known as lattice image or raster image, is composed of a single pixel. Magnification will distort.
  • A vector graph, also known as an object-oriented image or graphic image, is mathematically defined as a series of points connected by lines. No distortion after amplification. Software includes Adobe Illustrator, Sketch

A bitmap pixel is also a unit of length. A bitmap pixel is the smallest unit of data in a raster image (e.g. PNG, JPG, GIF, etc.).

Every bitmap pixel corresponds to every physical pixel, so that the image is perfectly clear

3.4.2 Relationship between pixels

  • CSS pixels == individual device pixels == logical pixels == DIP == bitmap pixels when the page is not scaled
  • At a standard display density (normal screen), one CSS pixel for each device pixel, and one CSS pixel for an hd screen equals N physical pixels

3.4.3 Pixel density

Pixels per inch (PPI) is the number of pixels per inch that can be displayed on a screen. Here’s another unit, dots per inch (DPI). Both values are calculated in the same way, but in different scenarios. PPI is used to measure screens, DPI is used to measure printers, mice and other devices.

Apple once set a standard for a 300-ppi phone screen, a 220PPI tablet screen and a 200PPI laptop screen.