问题描述:

I'm having a bad time guessing why one element has different pixel sizes depending on the set of rules loaded. Apparently the element has always the same font-size 6em, which is translated to an height of 96px. But after some other rules has been loaded the same font-size is translated to an height of 86px. Here are two snapshots of the computed styles:

Font size when page is loading

Font size when page has loaded fully

How can I track down to the rules that makes this happen?

Regards

网友答案:

An EM is not a fixed unit of measurement, it's a relative size. The origin of "EM" is literally the width of the letter "M" in a particular font. In digital typography, an EM is relative to the base font size. So, what you're seeing is an illustration of the "cascading" nature of CSS.

When initially loaded the base font is set either at a percent or a fixed size (e.g.: 12px, 14px, 100%, etc.) Then, when additional styles are loaded, the size of the font that your #TP_splash_screen is inheriting from is altered to be something smaller, so the 6em value is now smaller.

Consider this example:

body{
    font-size: 12px;
}

#TP_splash_screen{
    font-size: 6em;
}

.container{
    font-size: 10px;
}

If you use #TP_splash_screen as an element that is the direct child of the body element, then your font will be 6em of 12px (6 times the size of a 12px "M"). If you use #TP_splash_screen as an element that is a child of a container element, then your font will be 6em of 10px (6 times the size of a 10px "M").

EM's are a great unit of measurement for working with flexible, responsive layouts, they are not fixed units of measure.

相关阅读:
Top