What does px mean in css

In CSS, the full name of px is pixel, which means "pixel" in Chinese. It refers to the logical pixel used in CSS style code; it is a relative length unit, which is relative to the monitor screen resolution. of.

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

px pixel (CSS ​​pixel)

px is the abbreviation of pixel, which is the pixel unit and the basic unit for image display. In CSS, px is a relative unit of length relative to the screen display resolution.

CSS Pixel:

Also known as virtual pixel, device independent pixel or logical pixel, it can also be understood as intuitive pixel. CSS pixels are a web programming concept that refers to logical pixels used in CSS style code. For example, the CSS pixel count of iPhone 6 is 375 x 667px.

Virtual pixels can be understood as "intuitive" pixels, abstract units used by CSS and JS. All lengths in the browser are in CSS pixels, and the unit of CSS pixels is px.

In the CSS specification, length units can be divided into two categories, absolute units and relative units. Px is a relative unit, relative to device pixels.

On the same device, the physical pixel represented by each CSS pixel can change (that is, the first aspect of relativity of CSS pixels);
Between different devices, each The physical pixel represented by 1 CSS pixel can be changed (that is, the second aspect of relativity of CSS pixels);

px is actually the abbreviation of pixel, which is the basic unit of image display. It is neither a definite physical quantity nor a point or a small square, but an abstract concept. So be sure to understand its context when talking about pixels! Be sure to understand its context! Be sure to understand its context!

Take an example to understand the relativity of css pixels

Suppose we open a page with a PC browser. The width of the browser at this time is 800px. At the same time on the page There is a 400px wide block-level element container. It's obvious that the block container should take up half of the page at this point.

But if we zoom in on the page (via the "Ctrl key" plus the "key"), the zoom is 200%, which is twice the original size. At this time, the block container takes up the entire browser horizontally.

The paradox is that we have neither resized the browser window nor changed the CSS width of the block element, but it looks twice as big - this is because we enlarge the CSS pixels For twice as much.

When CSS pixels are the same size as screen pixels 1:1:

CSS pixels (black borders) begin to be stretched, at this time 1 CSS pixel Greater than 1 screen pixel

#That is to say, by default a CSS pixel should be equal to the width of a physical pixel, but the browser's magnification operation makes a CSS pixel equal to Two device pixels wide. You will see a more complicated situation later. On high-PPI devices, CSS pixels are equivalent to the size of multiple physical pixels even by default.

As you can see from the above example, CSS pixels are always just a relative value.

(Learning video sharing: css video tutorial)

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