Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what px means in css. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

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

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

Px pixels (CSS pixels)

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

CSS pixels (CSS Pixel):

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

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

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

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)

Px is actually the abbreviation of pixel (Pixel). It is the basic unit of image display. It is neither a definite physical quantity nor a dot or square, but an abstract concept. So be sure to be clear about the context when talking about pixels! Be sure to understand its context! Be sure to understand its context!

For example, to understand the relativity of css pixels.

Suppose we open a page with a PC browser with a width of 800px and a 400px-wide container of block-level elements on the page. It is obvious that the block container should account for half of the page at this time.

But if we zoom in on the page (using the "Ctrl key" plus the "+ key"), we zoom in to 200%, which is twice as large as the original. At this point, the block container horizontally occupies the entire browser.

The paradox is that we didn't resize the browser window or change the css width of the block element, but it looks like it's twice as big-because we magnify the CSS pixels twice as much.

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

CSS pixels (black border) begin to stretch, when 1 CSS pixel is greater than 1 screen pixel

That is, by default, an CSS pixel should be equal to the width of a physical pixel, but the browser zooms in so that one CSS pixel is equal to two device pixels wide. As you'll see later, on high-PPI devices, CSS pixels are even the size of multiple physical pixels by default.

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

These are all the contents of the article "what is the meaning of px in css?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.