What is the unit of css px?

In CSS, the full name of px is pixel, which means "pixel" in Chinese. It is the digital image length unit of the computer system. It is a relative length unit, which is relative to the screen display resolution. The resolution of a typical computer monitor is 96DPI, which means 1 pixel is "1/96" of an inch.

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

px is the abbreviation of pixel, which is the pixel unit and the basic unit for image display. It is translated from the English "pixel". Pix is ​​the common abbreviation of the English word picture. Adding the English word "element", it becomes Get pixel, so "pixel" means "picture element", sometimes also called pel (picture element).

px (pixel, pixel): It is a virtual length unit, which is the digital image length unit of the computer system. If px is to be converted into physical length, the precision DPI (Dots Per Inch, pixels per inch) needs to be specified. , generally there is a DPI option when scanning and printing. The default for Windows systems is 96dpi, and the default for Apple systems is 72dpi.

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

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

• Between different devices, the physical pixel represented by each CSS pixel can change (that is, the second aspect of relativity of CSS pixels);

Different devices have different basic image units. For example, the dot pitch of a monitor can be considered as the physical pixels of the monitor. The dot pitch of current LCD monitors is generally between 0.25mm and 0.29mm. The ink dots of the printer can also be considered as the physical pixels of the printer. 300DPI is 0.085mm, and 600DPI is 0.042mm.

Note that what we usually call monitor resolution actually refers to the resolution set by the desktop, not the physical resolution of the monitor. But now LCD monitors have become mainstream. Since the display principle of LCD is different from that of CRT, 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. The resolution is the same.

According to the definition of CSS specification, px in CSS is a relative length, which is relative to the resolution of the viewing device. This viewing device is usually a computer monitor. The resolution of a typical computer monitor is 96DPI, that is, 1 pixel is 1/96 inch (actually, assuming that our monitor resolution is consistent with the physical resolution, and the liquid crystal point pitch is actually between 0.25mm and 0.29mm, So it's unlikely to be exactly 1/96 inch, 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 the computer monitor, there will be problems with the output effect. For example, the resolution of the printer output on paper is much higher than that of the computer screen. If the physical pixels of the device are directly used without scaling, then the photos on the computer printed by a 600DPI printer will be about 6 times smaller than when viewed on a monitor.

So CSS stipulates that in this case, the browser should scale and adjust the pixel value to maintain a generally consistent reading experience. That is to say, the length of a certain pixel must always appear to be similar in size on different device outputs.

How to ensure this? Converting directly according to the size of the physical pixels of the device is of course one way, but CSS takes more consideration. It recommends that conversion should be performed according to the "reference pixel" (reference pixel).

The size seen by the eyes depends on the viewing angle. The viewing angle depends on the actual size of the object and its distance from the eye. A 1-meter-square object 10 meters away looks almost the same size as a 10-centimeter-square object 1 meter away. This is the common sense that a mountain cannot be seen through a leaf.

Therefore, the CSS specification uses the viewing angle to define the "reference pixel". 1 reference pixel is the 1 point (i.e. 1 /96 inches) viewing angle.

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

When we use different devices to output, the typical distance between the eyes and the device output is different. For example, a computer monitor is usually at arm's length, while when reading books and paper (corresponding to the device output of a printer), it is usually closer. When watching TV, it will be further away. For example, the general recommendation is 2.5 to 3 times the diagonal length of the TV screen - if you have a 42' color TV, it is almost 3 meters away. If you're watching a movie... I don't know how far it is, you can measure it yourself.

So, 1 reference pixel:

For a computer monitor it is 0.26mm (i.e. 1/96 inch);

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

When converting, for a 300DPI printer (that is, each point is 1/300 inches), 1px is usually rounded to 3dots, which is about 0.25mm; and for a 600DPI printer, it may be rounded to 5dots, which is 0.21mm.

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

However, if you understand absolute units as absolute control over the output effect, things are quite different. As far as the main object of web page output - the computer screen is concerned, px can be regarded as a reference unit - consistent with the desktop resolution. If it is an LCD screen, it is almost always consistent with the physical resolution of the LCD screen - that is It is said that the 1px set by the web designer is "1 dot on the monitor of the user who finally sees this web page"! On the contrary, those absolute units are not absolute at all.

Because absolute units such as cm or pt must be converted to pixels when displayed on the screen, and this conversion is not based on the actual physical length of the pixels (the browser does not need to know, and it is impossible to know What is the current physical length of 1px of this monitor), but it is calculated according to the DPI set by the desktop. In other words, the web designer specifies that a certain font is 12pt (i.e. 1/6 inch or 4.2mm). In fact, when you measure the screen, it is almost impossible to be exactly 12pt, but only 16px close to 12pt (converted according to 96DPI) . If your screen pitch is 0.29mm, it's actually 4.64mm or 13.15pt. If you change the desktop to a large font (120DPI), the final 12pt is equivalent to 20px. According to the dot pitch of 0.29mm, the final effect is 16.44pt.

In the past, it was recommended that web designers not use px. One reason is that users can adjust the desktop DPI according to their own needs, thereby 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 like px cannot be adjusted as needed. Just like when a photo is actually printed, you can of course scale it as needed, fonts and images set in px can be scaled when actually displayed - then the 1px specified by the web designer no longer corresponds to the 1px of the user's desktop , instead it might correspond to 1.2px or 1.5px or other values.

In the past, the browser's option to adjust font size was only effective for absolute length (equivalent to adjusting the DPI inside the browser), and was invalid for px. This can only be said to be a design problem of the past browser, not px. inherent problems. Browsers now support scaling of fonts set in px. Like Firefox, users can also choose to scale fonts alone or images as well. Therefore, it is completely feasible to use all px "pixel-level precise design", and it is also a design method that I think is reasonable. After all, px in CSS is meant to ensure a consistent reading experience. As for whether it is a fluid layout or a fixed layout, and whether it can adapt to different resolutions, that is another topic, and it is not directly related to whether to use px as the unit.

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the unit of css px?. For more information, please follow other related articles on the PHP Chinese website!