问题
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 "em" is used
回答1:
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
回答2:
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.
回答3:
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...
回答4:
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.
回答5:
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".
来源：https://stackoverflow.com/questions/4139455/what-does-the-unit-em-depend-upon-in-style-sheets-css