AnyForWeb sharing: pixels! Do you really know ?, Anyforweb sharing

AnyForWeb sharing: pixels! Do you really know ?, Anyforweb sharing

"Pixel" should not be familiar with front-end staff and designers, but there will still be many obstacles to pixel communication during their communication, the reason is not because of inconsistent views, but because pixels are divided into two types.

 

AnyForWeb first introduces the differences between the two pixels.

 

Pixels are divided into device pixels and CSS pixels ). Device pixels are the pixels we use in devices. They are a physical concept. CSS pixels are the logical elements in CSS style code and can be divided into web programming concepts.

 

In simple terms, the device pixel is the pixel in the designer's mouth, and the CSS pixel is the pixel that the front-end personnel think. The inconsistency of the prerequisites leads to the smooth communication between the two parties.

 

Next, AnyForWeb tells you how to convert the two.

 

The relationship between device pixels and CSS pixels is determined by the relationship between pixels per inch (ppi. The ppi is the number of pixels contained in each inch. Therefore, the larger the number, the clearer the displayed image. The ppi value must be calculated by the front-end personnel. The formula is: PPI = √ (X 2 + Y 2)/Z, X = length pixel, Y = width pixel, and Z = screen size.

 

 

 

The Calculation of ppi is to obtain the density demarcation. Different Density regions correspond to different scaling ratios (for example,). We need to obtain the most appropriate image scaling ratio based on the ppi value, that is, the optimal scaling ratio of device pixels.

 

 

The ppi is mainly divided into four density intervals. 320-is classified as a low-density mobile phone.-Is the medium-density,-is the high-density, and more than is the ultra-high-density (that is, Apple's Retina ).

 

When we get the device pixel ratio and the pixel ratio per inch (ppi), we can get the ratio between them. When this ratio is, one device pixel is used to display one CSS pixel. When the ratio is, one CSS pixel is displayed with four device pixels. When the ratio is, 9 (3*3) is used) device pixels display 1 CSS pixel, and so on.

 

With these basic pixel knowledge as the foundation, collaboration between designers and front-end personnel will become smoother. Generally, the design draft submitted by the designer uses the device pixel. Later, the front-end personnel calculate the pixel ratio of the device, and then convert and encode the device.

 

This article was initially published by AnyForWeb. To View Details, click AnyForWeb share: pixel! Do you really understand?