Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use html's px, em and pt length units", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "html px, em and pt length units how to use" article.

1. Introduction of PX\ EM\ PT units

Px unit name is pixel, relative length unit, pixel (px) is the domestic recommendation relative to the screen resolution of the monitor

The em unit name is the relative length unit. Relative to the font size of the text in the current object, it is widely used abroad; extended reading: html em tag, html em emphasis tag

The name of the pt unit is Point, and the absolute unit of length is generally used in older versions of table, but it is basically not used now.

Brief introduction of html units:

Px pixel Pixel; relative length unit.

Pt point (Point); absolute unit of length

Em relative unit of length, where em and html tags are spelled exactly the same as "EM", and here em is used as a separate unit of text.

1. In the past, IE could not adjust the font size of those using px as a unit, but now almost all IE supports it. PX is also recommended here.

two。 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 netizens use IE browsers (or kernels).

Px pixels (Pixel). A unit of relative length. Pixel px is relative to the screen resolution of the display, and QQ screenshots also use PX as the unit of length and width.

Em is a unit of relative length. The font size relative to the text within the current object. If the current font size for inline text is not artificially set, it is relative to the default font size of the browser.

II. Comparative cases of html units

1. Simple example:

The width of the Width:300px is 300 pixels.

The width of Width:300pt is 300 points.

The width of Width:300em is 300relative length

Above, we set different units with the same value.

2. Set different length em px pt units for the text to see the effect:

CSS Code:

.-px {font-size:12px}.-pt {font-size:12pt}.-em {font-size:2em}

HTML Code:

I am.

3. comparative illustration of unit length

III. Conversion between em and px

The default font height of any browser is 16px (16 pixels). All untuned browsers match: 1em=16px. Then 12pxcards 0.75empendium 10pxboxes 0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5%, in the body selector in css, which changes the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is, just divide your original px value by 10 and replace it with em as a unit.

12px is equivalent to 9pt length

12px is equivalent to 0.75em length

9pt is equivalent to 0.75em length

Generally speaking, we use em to convert px more often.

Advanced em to px conversion:

The default font height of any browser is 16px (16 pixels). All untuned browsers match: 1em=16px. Then 12pxcards 0.75empendium 10pxboxes 0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5%, in the body selector in css, which changes the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is, just divide your original px value by 10 and replace it with em as a unit.

Specific use:

We are declaring an initial font-size=62.5% to all html tags

Such as:

* {font-size=62.5%}

This later layout can be used to set em units according to the following techniques

Font-size:1.2em equals font-size:12px

Font-size:1.4em equals font-size:14px

After this is equivalent to the initial font-size=62.5%, there is only a 10-fold difference between em and px units, so that it is easy to calculate and set the em length value.

4. The em unit has the following characteristics:

1. The value of em is not fixed

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

If we want to use em as a unit when writing CSS, we need to pay attention to two points:

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

two。 Divide your original px by 10 and replace it with em.

3. Recalculate the em values of those enlarged fonts. Avoid repetitive declaration of font size.

That is to avoid the phenomenon of 1.2 * 1.2 = 1.44. For example, if you declare a font size of 1.2em in # content, then the declared font size can only be 1em, not 1.2em, because this em is not the other em, it becomes 1em=12px because it inherits the font height of # content.

With the exception of 12px Chinese characters, the 12px (1.2em) size of Chinese characters obtained from the above method is not equal to the font size defined by 12px directly in IE, but slightly larger. This problem has been solved by Jorux. Just change 62.5% to 63% in the body selector to display properly. The reason may be that when IE processes Chinese characters, the accuracy of floating-point values is limited. I don't know if there's any other explanation.

The above is about the content of this article on "how to use html's px, em and pt length units". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow 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.