Anyforweb Share: Pixel! Do you really know that?

"Pixels" should be more familiar to front-end people and designers, but there are still a lot of communication barriers to pixels in their communication, not because their opinions are inconsistent, but because, like Suben, they are divided into two kinds.

Anyforweb first of all to introduce the difference between the two different pixels.

The pixels are divided into device pixels (devices pixel) and css pixels (CSS pixel). A device pixel is a physical concept that we use in a device, and CSS pixels are logical elements in CSS style code that can be partitioned into the concept of Web programming.

Simply put, the device pixel is the pixel in the designer's mouth, and the CSS pixel is the pixel that the front-end people think. The inconsistency of preconditions led to the communication between the two sides is not smooth.

Next, Anyforweb tells you how to convert between the two.

The relationship between the device pixel and the CSS pixel is determined by the pixel per inch (pixel per-inch, or PPI). PPI refers to the number of pixels per inch, so the more the number, the clearer the image is displayed. The PPI value needs to be calculated by the front-end staff, and the formula is expressed as ppi=√ (x2+y2)/Z, x= length pixels, y= width pixels, and z= screen size.

The PPI calculation is to obtain the density demarcation, the different density region corresponds to the different scale (for example), we must according to the PPI value to obtain the most suitable scale of the image, namely the device pixel optimal scale ratio.

The PPI is mainly divided into 4 density intervals. 120-160 is classified as a low-density cell phone, 160-240 is medium density, 240-320 is high-density, and more than 320 is ultra-high density (that is, the apple-raised retina).

When we acquire devices like silverhalide and pixel-per-inch ratios (PPI) at the same time, we can draw a ratio between them. When this ratio is 1:1, 1 device pixels are used to display 1 css pixels. When this ratio is 2:1, 4 device pixels are used to display 1 css pixels, and when this ratio is 3:1, 9 css pixels are displayed using 1 (3*3) device pixels, and so on.

With these basic basics of the pixel, the collaboration between the designer and the front-end staff becomes smoother. Typically, designers submit design drafts using device pixels, which are later calculated by the front-end staff and are later converted and encoded.

This article was originally created by anyforweb technology to view the details, please click on the Anyforweb share: Pixel! Do you really know that? "

Anyforweb Share: Pixel! Do you really know that?