Explore the conversion between PX pixels and Pt pounds, mm and MM

Pixel as a size of image , Only exists in computers , Like RGB Like color patterns, they only exist in computers . A pixel is a virtual unit , There is no pixel unit in real life .
In reality, we see a person , Can you say how many pixels tall it is ？ You can't , Usually we say he has 1.82 Meter high , perhaps 182 Centimeter etc . All used are traditional length units . The traditional unit of length is millimeter 、 centimeter 、 Decimeter 、 rice 、 km 、 Light year and other units .

DPI(Dots Per Inch)

Pixels per inch . When scanning and printing, there are generally DPI Optional .Windows The system default is 96dpi,Apple The system default is 72dpi.

px Pixels (Pixel)

Relative length unit . It's a virtual unit of length . It's the unit of digital image length of a computer system , If px To convert to physical length , You need to specify precision DPI.

em

Due to the difference of screen size , The display effect of the same size font under different screens is quite different . So dynamic amplification / Reducing the font becomes more important . Obviously, it is complex to make compatibility for every font setting , So there was em and rem.

em It's a unit of relative length . Relative to the font size of the text in the current object .

For example, the font size of the current inline text is not set artificially , Relative to the browser's default font size .

Because the default font size of the browser is 16px, Therefore, browsers that have not adjusted the default font size conform to : 1em = 16px.

em Inherits the font size of the parent element . thus , Just change the font size of the parent element , You can synchronously enlarge or shrink the font of small elements .

But there are also a few points to pay attention to ：

1. body The selector declares Font-size=62.5% (10 ÷ 16 × 100% = 62.5%);
2. Put your original px Number divided by 10, Then put on em As a unit ;
3. Recalculate the magnified fonts em The number . Avoid repeating declaration of font size .

rem (font size of the root element)

because em There is a problem of inheriting the parent element , When changing the font size, the inheritance relationship involved becomes complicated .
rem Is the size relative to the font size of the root element . Such as The text size is set to font-size: 10px, be 1rem = 10px. Use rem Setting the font is much simpler .

in Inch (Inch)

A unit of absolute length .

pt pounds (Point)

A unit of absolute length . It's a unit of physical length , refer to 72 A quarter of an inch .
1in = 72pt

mm mm (Millimeter)

A unit of absolute length .
1in = 25.4 mm = 72pt

cm centimeter (Centimeter)

A unit of absolute length .
1in = 2.54cm = 72pt

pt And px Conversion formula

pt and px The conversion formula of can be based on pt The definition of comes to :
pt = 1/72( Inch ), px = 1/dpi( Inch )
therefore pt = px * dpi / 72
With Windows Under the 96dpi To calculate
pt = px * 96/72 = px * 4/3 = px * 1.33
Basically 1pt About equal to 1.33 Pixels

mm And px Conversion formula

from pt = px * dpi / 72
Then you know 1in = 25.4mm = 72pt
be 25.4mm/72 = px * dpi / 72
have to mm = px * dpi / 25.4
With Windows Under the 96dpi To calculate
mm = px * 96 / 25.4
mm = px * 3.78
Basically 1 mm About equal to 3.78 Pixels