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

This article will explain in detail how Css uses em to set font size. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

If you want to avoid the problem of not being able to mediate and dispatch text in the network Explorer, many enlighteners use em units instead of pixels.

The W3C recommends the use of em size units.

1em is the current font size. If the font-size of an element is 16 pixels, then 1em is 16 pixels for that element. When you set the font size, the value of em changes relative to the font size of the parent element.

The default text size in the reader is 16 pixels. Therefore, the default size of the 1em is 16 pixels.

You may apply the following formula to convert pixels to em:pixels/16=em

(note: 16 is the default font size of the parent element. If the font-size of the parent element is 20px, then the formula should be changed to: pixels/20=em)

Instance H2 {font-size:3.75em;} / * 60px/16=3.75em * / h3 {font-size:2.5em;} / * 40px/16=2.5em * / p {font-size:0.875em;} / * 14px/16=0.875em * /

Give it a try

In the following example, the size of the text in em is similar to the pixel text in the previous example. However, if you use em units, you may adjust the text size in all readers.

Unfortunately, there are still problems in IE. When you resize the text, it is larger or smaller than the deformed size.

Contact application percentage and EM

The solution that does not work in all browsers is to set the default font-size value as a percentage for the body element (parent element):

Instance body {font-size:100%;} H2 {font-size:3.75em;} h3 {font-size:2.5em;} p {font-size:0.875em;}

Give it a try

Our code is particularly useful. In all readers, the size of the text to be communicated is displayed and all browsers are allowed to resize the text.

On "Css how to use em to set font size" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.