what does the unit "em" depend upon in style sheets. css

em adjust size according to screen size,

yes but confused

• does em depend upon browser settings? which settings?
• or does em depend upon screen resolution?
• or help what does it depend upon and from where can these elements be changed to observe the difference in sizing when "e开发者_运维技巧m" is used

---

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Quote from w3schools

---

The tricky thing to remember about em as a unit of size when coding CSS is that it is cumulatively relative and, once a base font size has been established, treated roughly like percentages.

Thus picture a <strong> inside a <p> like so:

<p>foo <strong>bar</strong></p>

with the following rules:

p {font-size:0.8em;}
strong {font-size:1.0em;}

Contrary to first impressions, the word bar will not be bigger than the word foo; the words will be the same size - the font size inside the strong tag is set to 1.0 em relative to 0.8 em, or 0.8 em.

By the same token rules like so:

p {font-size:0.8em;}
strong {font-size:0.8em;}

Will not result in foo and bar being the same size; foo will be 0.8em relative to it's container's font size while bar will be 0.8em relative to it's container's font size, or ~0.64em relative to foo's container.

---

or more exactly, a em is the height/width in pixels of a "M" character in the current font-family/font-size. unless it's a monospace font, a "|" and a "M" represent different widths in pixels...

---

em is related to the current font size - as set by css on parent elements. Historically em was taken as the width of the letter M. However since not all fonts include M now that cannot be guaranteed!

The good thing about it is that it will make non-text elements scale with font size if the user changes the font size using their browser settings.

---

As quoted for w3schools, the em is the "current font size" and everywhere you see 'em' it can be replaced, as to meaning, by the words "current font size".

font-size is 20px then 1 em is 20px. (current font size is 20px).
font-size set to 0.7 em then the font size changes to 14px. (0.7 x current font size = 14px) and one em is now 14px.

If browser default font size is 16px, and font size not set, then:
current font size = default font size = 16px = 1em.

If browser default font size is set to,say, 30px then:
current font size = default font size = 30px = 1em

Screen dpi exists to translate lengths specified in inches into pixels so when font size is specified in points.
font size in pixels =[( font size in points)/72] x screen dpi
To that extent the em depends upon screen resolution i.e. the screen dpi set via the Control Panel.
http://www.emdpi.com/screendpi.html

For computers the em was never the width/height of the letter 'M".