Can css use pixel units?

Pixel units can be used in css; the pixel unit refers to the unit relative to the monitor screen resolution and is a relative length unit. "px" is used as the pixel unit in css and is used to adjust elements. The size or spacing; this pixel length has nothing to do with the text screen pixels seen on the monitor.

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

Can css use pixel units?

css can use pixel units

The px unit name is pixel, and pixel (px) is relative to the monitor screen In terms of resolution, this pixel length has nothing to do with the text screen pixels you see on the monitor.

And it is always an approximate value on a specific device (the principle is to be as close as possible to the reference pixel).

px is actually a unit measured in degrees.

Pixels are a unit of length that tell the browser how to resize or space items.

px pixels (CSS pixels)

px is the relative length.

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 time, the physical pixel represented by each CSS pixel can change (that is, the second aspect of relativity of CSS pixels);

px is actually the abbreviation of pixel, which is the image display The basic unit 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, html video tutorial)

The above is the detailed content of Can css use pixel units?. For more information, please follow other related articles on the PHP Chinese website!