Mobile Web Learning Notes

Pixel Pixel Basics:

Pixels are the basis of a page layout. A pixel is the smallest area in which a computer can display a particular color. When the device is the same size but the pixels become denser, the screen can display a more detailed transition and the site looks more crisp.

Px:pixel, pixels, the smallest unit displayed on the screen for web design, intuitive and convenient;

Pt:point, is a standard length unit, 1pt=1/72 inches, for the printing industry, very simple to use;

EM: That is,%, in CSS, 1em=100%, is a ratio, combined with the use of CSS inheritance relationship, with flexibility;

PPI (DPI): pixel (dot) per inch, the number of pixels per inch (dots), is a rate that represents "sharpness", "precision".

Classification:

There are actually two types of pixels: device pixels and css pixels

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

CSS pixels are used for every CSS declaration and almost all JavaScript properties, so you never actually use device pixels, the only exception being screen.width/height

Scaling:

On the desktop side, the CSS's 1 pixels are often the 1 physical pixels that correspond to the computer screen.

On the mobile side, scaling is a recurring operation due to screen size limitations.

Regardless of whether we zoom in or out, the CSS pixels set by the element (such as width:300px) are always constant, and how many device pixels a CSS pixel corresponds to depends on the current zoom ratio.

Device pixel bloom ratio DPR (devicepixelratio):

DPR = device pixel/css pixel (in One Direction)

The device pixel has a JavaScript attribute corresponding to 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

    640 (PX)/(px)  = 2    1136 (px)/568 (px) = 2    640 (px) *1136 (px)/(px)  *568 (px) = 4

PPI and how it is calculated:

PPI:pixels per inch is the number of pixels that are owned by inches.

The calculation method is very simple, the number of pixels in the diagonal direction is calculated by the number of pixels with long heel height (right triangle), and then the pixel count of the diagonal is divided by the screen size is the PPI.
The formula is expressed as ppi=√ (x^2+y^2)/z (X: Length pixels, Y: width pixels; Z: Screen size).

Mobile Web Learning Notes