Unit in CSS

Basic knowledge:

1. Length Unit

In CSS, there are two types of length units: absolute length unit and relative length unit.

Absolute length unit

The absolute length is measured in (INCHES), CM (centimeters), mm (millimeters), Pt (lbs), and PC (PICA ). In (INCHES), CM (centimeters), mm (millimeters), and Common units in the real world are the same. Focus on Pt (lbs) and PC (PICA ).

Pt (lbs): A unit commonly used in standard printing. The length of 72pt is 1 inch.
PC (PICA): this is also a printing unit. The length of 1 PC is 12 lbs.

The absolute length unit, although easy to understand, is rarely used in Webpage Design.

Unit of Relative Length

The unit of relative length is the unit of maximum length used. Including em, ex, and PX.

Em is the value that defines the text size, that is, the value of the font-size attribute in the text. For example, if the text size of an element is defined as 12pt, 1em is 12pt for this element. The actual size of the unit em is affected by the font size.

Similar to Em, ex refers to the height of the letter X in the text, because the x height of different fonts is different, so the actual size of ex, it is affected by two factors: font size and font size.

PX is commonly referred to as pixel, which makes the maximum unit of length used in Webpage Design. Divide the display into tiny squares, each of which is a pixel. On the surface, it seems easy to understand. In fact, the specific size of PX is affected by the screen resolution, that is, it is related to the way the screen is divided. For example, if the display uses a 800x600 pixel resolution, the width of each word is 1/8 of the screen. If you set the resolution of the monitor to 1024x768 pixels, the text in the 100px font is the same, and its width is 1/10 of the screen width.

Advantages and disadvantages:

Px: pixel-based unit. pixel is a useful unit, because it can ensure that the difference between one pixel is indeed visible in any media.

EM: It is generally used to measure the general unit of length (for example, the margin blank and fill of element turnover). When used to specify the font size, EM refers to the font size of the parent element.
For example
<Div style = "font-size = 12px">
<Span style = "fontsize = 2em"> the word here is 24px </span>
</Div>
If you use em to specify the padding, the padding width is determined by the font size of the DIV element.

PT is a commonly used unit in the printing industry.

The above three pixels are pixel units, Em is relative units, and PT is absolute units. their respective advantages are that PX can achieve the expected results on computer screens, and on printers and other high-resolution devices, it can achieve the desired results.
Em has many advantages. For example, on a page, you specify the font size of a parent element. In this way, you can adjust an element to change the size of all elements in proportion. it can be scaled freely, for example, used to create a scalable style sheet.
PT is a measurement unit with a fixed length and can be measured using a measurement device. absolute units are limited because they cannot be scaled. They are generally used only when the output media is known to be used. however, it is best to use relative units in most cases.
So there should be no best match. It is usually better to match PX and Em. All hands are played, not replicated !!!

Suggestion:

In general, PX is used to define the font. Therefore, the font amplification function cannot be used in browsers, and most foreign websites can use it in IE. Because

1. ie cannot adjust the font size that uses PX as the unit;

2. The reason why most foreign websites can be adjusted is that they use EM as the font unit;

3. Firefox can adjust PX and Em, but more than 96% of Chinese users use IE browser (or kernel ).

Pixel (pixel ). The unit of relative length. Pixel PX is relative to the screen resolution of the monitor. (Derived from the css2.0 manual)

Em is the unit of relative length. The font size relative to the text in the current object. If the font size of the text in the row is not set manually, the default font size is relative to that of the browser. (Derived from the css2.0 manual)

The default font height of any browser is 16 PX. All unadjusted browsers match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare font-size = 62.5% in the body selector in CSS, which changes the EM value to 16px * 62.5% = 10px, so that 12px = 1.2em, 10px = 1em, that is, you only need to divide your original PX value by 10, and then change to Em as the unit.

Em has the following features:

1. The EM value is not fixed;

2. Em inherits the font size of the parent element.

Therefore, when writing CSS, pay attention to the following two points:

1. Declare font-size = 62.5% in the body selector;

2. Divide your original PX value by 10 and change it to Em as the unit;

3. recalculate the EM values of the enlarged fonts. Avoid repeated statement of font size.

That is, to avoid 1.2*1.2 = 1.44. For example, if you declare in # content that the font size is 1.2em, the font size of P can only be 1em, not 1.2em, because this EM is not em, it becomes 1em = 12px because it inherits the font of # content.

except for 12 PX Chinese characters, the size of 12 PX (1.2em) Chinese characters obtained by the preceding method is not equal to the font size defined by 12 Px in IE, but a little larger. This problem has been solved by jorux. You only need to change 62.5% to 63% in the body selector to display it normally. The reason may be that when ie processes Chinese characters, the floating point value accuracy is limited. I don't know if there are any other explanations.