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".