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

This article focuses on "how to understand the relationship and conversion among CSS Font-Size: em, px, pt and Percent". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the relationship and conversion among CSS Font-Size: em, px, pt and Percent.

I. basic introduction

1. "Ems": em, the size is not fixed, and becomes a relative unit (body is relative to the default font setting of the browser, and the subset is relative to the parent). The default font size of the browser is 16px, then 1em = 16px, and it is extensible, 2em = 32px. The commonly used font size px is converted into em.

16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em

2. "Pixels": px, whose size is fixed and called absolute unit, has poor accessibility on the mobile end.

3. "Points": pt, the size is fixed, belongs to the absolute unit, suitable for printing, printing media.

4. "Percent":%, similar to em, expressed in percent, the current font size is 100%, use% to set the font, your page font is also very accessible on the mobile device.

II. Relationship

In general, 1mm 12ptcm 16px100%. The following example presupposes setting the base font size in body.

As you can see from the figure above, the relative units em and% will change with the underlying font size, while pt and px will not change, which is why you chose em and% to set the font of the web document text (which is also very accessible on the mobile side).

3. Conversion between em and%, em and px

Characteristics of em:

1. The value of em is not fixed

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

Rewrite steps:

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

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

If only the above two steps were needed to solve the problem, no one would use px. After the above two steps, you will find that the font of your website is unimaginably large. Because the value of em is not fixed and inherits the size of the parent element, you may set the font size to 1.2em, that is, 12px, in the content div. Then you set the font size of selector p to 1.2em, but if p is a child of content, the font size of p is not 12px, but 1.2 m = 1.2 * 12px=14.4px. This is because the font size of content is set to 1.2em, which inherits the size of its parent element body, that is, 16px * 62.5% * 1.2=12px, while p as its child, em inherits the font height of content, that is, 12px. So the 1.2em of p is no longer 12px, but 14.4px.

3. Recalculate the em values of those enlarged fonts. Avoid repeated declaration of font size, that is, to avoid the phenomenon of 1.2 * 1.2 = 1.44 mentioned above. For example, if you declare a font size of 1.2em in # main, then the font size of p 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.

Weird 12px Chinese characters

Another strange phenomenon will be found when completing the em conversion, that is, the 12px (1.2em) size of Chinese characters obtained by the above method is not equal to the font size defined by 12px directly in IE, but a little larger. I have solved this problem, you just need to change 62.5% to 63% in the body selector to display properly.

At this point, I believe you have a deeper understanding of "how to understand the relationship and conversion between CSS Font-Size: em, px, pt and Percent". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.