HTML is not a programming language, but a markup language, which is necessary for web page production. "Hypertext" means that the page can contain non-text elements such as pictures, links, and even music and programs.
The difference between px, em, pt:
1. Different representative units.
px represents the pixel unit, em represents the relative unit, and pt represents the absolute unit.
Two, the unit length is different
pt is 72th of an inch, px is the length unit of the digitized image, and em is a multiple of the character width.
Let's take a look at the length units px, em, pt in HTML.
-
pt (point, pound): is a physical length unit, which refers to 72th of an inch.
-
px (pixel, pixel): It is a virtual length unit, which is the length unit of the digital image of the computer system. If px is to be converted into a physical length, the precision DPI (Dots Per Inch, pixels per inch) needs to be specified. It is generally used when scanning and printing. All have DPI optional. The Windows system defaults to 96dpi, and the Apple system defaults to 72dpi.
-
em (relative length unit, relative to the font size of the text in the current object): is a relative length unit, originally referring to the width of the letter M, hence the name em. Now it refers to the multiple of the character width, the usage is similar to the percentage, such as 0.8em, 1.2em, 2em, etc. Usually 1em=16px.
Brief introduction of html unit:
-
Px Pixel; relative length unit.
-
Pt point (Point); absolute length unit
-
Em is a relative length unit, where em is spelled exactly the same as the "EM" of the html <em> tag, and here em is used as a separate text unit.
Unit conversion:
The default font height of any browser is 16px (16 pixels). All unadjusted browsers conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em.
In order to simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in css, which makes the em value 16px*62.5%=10px, so that 12px=1.2em, 10px=1em, also In other words, you only need to divide your original px value by 10, and then replace it with em as the unit.