Shulou(Shulou.com)06/02 Report--

This article mainly introduces what unit px refers to in css. It is very detailed and has a certain reference value. Friends who are interested must read it!

In css, the full name of px is pixel, which means "pixel" in Chinese. It is the digital image length unit of computer system. It is a relative length unit, which is relative to the resolution of screen display. The resolution of a typical computer monitor is 96DPI, that is, one pixel is "1canned 96" inches.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Px is the abbreviation of pixel, the pixel unit, and also the basic unit of image display, translated from English "pixel", pix is the common abbreviation of the English word picture, plus the English word "element" element, you get pixel, so "pixel" means "portrait element", sometimes also known as pel (picture element).

Px (pixel, pixels): a virtual unit of length, a unit of digital image length in a computer system. If px is to be converted into physical length, you need to specify a precision DPI (Dots Per Inch, pixels per inch). DPI is generally available when scanning and printing. The Windows system defaults to 96dpi.Apple defaults to 72dpi.

In CSS, px is a relative unit of length relative to the resolution of the screen display.

On the same device, the physical pixel represented by each CSS pixel can be changed (that is, the relativity of the first aspect of the CSS pixel)

Between different devices, the physical pixel represented by each CSS pixel can be changed (that is, the relativity of the second aspect of the CSS pixel)

Different devices have different basic units of image, such as the point distance of the display, which can be regarded as the physical pixels of the display. Nowadays, the point distance of LCD is generally between 0.25mm and 0.29mm. The ink dot of the printer can also be thought of as the physical pixel of the printer. 300DPI is 0.085mm and 600DPI is 0.042mm.

Note that what we usually call the display resolution actually refers to the resolution set by the desktop, not the physical resolution of the monitor. But now liquid crystal display has become the mainstream, because the display principle of liquid crystal is different from that of CRT, and the display effect is best only when the desktop resolution is consistent with the physical resolution, so now our desktop resolution is almost always the same as the physical resolution of the monitor.

According to the definition of the CSS specification, px in CSS is a relative length, which is relative to the resolution of viewing device. This viewing device is usually a computer monitor. The resolution of a typical computer monitor is 96DPI, that is, 1 pixel is 1x96 inches (in fact, assuming that our display resolution is the same as the physical resolution, and the liquid crystal point distance is actually between 0.25mm and 0.29mm, so it is unlikely to be exactly 1x96 inches, but just close).

Generally speaking, px is the physical pixel of the corresponding device. However, if the resolution of the output device is very different from that of the computer monitor, the output effect will be problematic. For example, when a printer is output to paper, its resolution is much higher than that of a computer screen. if you do not zoom and directly use the physical pixels of the device, the photos on the computer printed by the 600DPI printer are about six times smaller than those seen on the monitor.

So CSS stipulates that in this case, browsers should scale and adjust the pixel values to keep the reading experience roughly consistent. That is, to maintain the length of a certain pixel, it always looks the same on the output of different devices.

How can this be ensured? It is certainly one way to convert directly according to the physical pixel size of the device, but CSS thinks more about it, suggesting that the conversion should be done according to "reference pixel" (reference pixels).

The size of the eye depends on the visual angle. The visual angle depends on the actual size of the object and the distance between the object and the eye. A thing that is 1 meter square at a distance of 10 meters looks about the same size as something 10 centimeters square at a distance of 1 meter. This is the common sense that the so-called blinded leaves do not see Mount Tai.

Therefore, the CSS specification uses a perspective to define "reference pixels", where 1 reference pixel is the angle of view of 1 point (1 inch 96 inches) when viewed from an arm away with a device output with a resolution of 96DPI (that is, 1 inch 96 dots).

Please note this difference-the reference pixel defined by the CSS specification is not a reference pixel of 96 inches, but a visual angle of 96 inches at arm's length. It is generally believed that the average arm length is 28 inches, so the angle of view can be calculated to be 0.0213 degrees. (that is, (1x96) in / (28in * 2 * PI / 360deg))

When we use different device outputs, the typical distance between the eyes and the device output is different. Computer monitors, for example, are usually arm's length apart, while reading books and paper (corresponding to the device output of the printer) are usually closer. Watching TV is farther away, for example, it is generally recommended that it is 2.5 to 3 times longer than the diagonal of the TV screen-if you are a 42' color TV, it is about 3 meters away. If you go to the movies... I don't know how far it is. Measure it yourself.

Therefore, 1 reference pixel:

For a computer monitor it is 0.26mm (I. e., 1DB 96 inch)

For laser printers, it is 0.20mm (assuming the reading distance is usually 55cm, that is, 21 inches)

When converting, for 300DPI printers (that is, each point is 1x300 inches), 1px is usually rounded to 3dots, which is about 0.25mm, while for 600DPI printers, it may be rounded to 5dots, that is, 0.21mm.

To sum up, px is a relative unit and is always an approximate value on a particular device (the principle is to be as close to the reference pixel as possible).

However, if you understand the absolute unit as absolute control of the output effect, things are quite different. In terms of the main object of web output-- the computer screen, the px can be seen as a benchmark unit-- consistent with the desktop resolution, and in the case of an LCD screen, it is almost always the same as the physical resolution of the LCD screen-- that is, the 1px set by the web designer is "1 dot distance on the display of the user who finally sees the web page"! On the contrary, they are absolute units, but they are not absolute at all.

Because absolute units, such as cm or pt, are finally converted to pixels when they are displayed on the screen, and this conversion is not based on the actual physical length of pixels (browsers do not need to know, and it is impossible to know what the physical length of the 1px of the current display is), but based on the DPI set by the desktop. In other words, the web designer specifies that a font is 12pt (that is, 1 96DPI 6-inch or 4.2mm). In fact, when you measure the screen, it is almost impossible to be exactly 12pt, but just close to the 16px of 12pt (converted according to 96DPI). If your screen distance is 0.29mm, it's actually 4.64mm or 13.15pt. If you change the desktop to big font (120DPI), the final 12pt is equivalent to 20px, according to the 0.29mm dot distance, the final effect is 16.44pt.

In the past, web designers were advised not to use px, based on the fact that users can adjust the desktop DPI according to their own needs, thus controlling the actual length of the absolute length (tongue twister).

However, this is actually suspicious. Since the actual length of the absolute length can be adjusted as needed, there is no reason why a relative length such as px can not be adjusted as needed. Just as photos can be scaled as needed when they are actually printed, fonts and images set by px can be scaled when they are actually displayed-then the 1px specified by the web designer no longer corresponds to the 1px of the user's desktop, but may correspond to 1.2px or 1.5px or other values.

In the past, the browser's option to adjust font size was only valid for absolute length (equivalent to adjusting the DPI within the browser), but not for px. This can only be said to be a problem with the design of browsers in the past, not inherent in px. Browsers now support zooming for fonts set in px. Like Firefox, users can also choose whether to scale the font alone or with the picture. So all the use of px's "pixel-level precision design" is completely feasible, and I think it is a reasonable way of design. After all, px in CSS is meant to ensure a consistent reading experience. As for streaming layout or fixed layout, whether it can adapt to different resolutions, that is another topic, which is not directly related to whether to use px as a unit.

The above is all the contents of the article "what does px refer to in css"? thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.