Welche Font-Size verwendet eine Media-Query?

[Rolf B]

Hallo alle,

wenn ich im Browser die Default-Schriftgröße von 16px eingestellt und dazu dieses CSS habe:

html {
	font-size: 20px;
}
body {
	font-size: 24px;
}

@media (width > 50em) {
	body {
		background-color: green;
	}
}

und ich ziehe den Viewport langsam in die Breite - ab welcher Breite wird der Viewport grün?

1. ab 800px? (50em*16px)
2. ab 1000px? (50em*20px)
3. ab 1200px? (50em*24px)

Ich war mir nicht sicher, ob es 2. oder 3. ist und habe es ausprobiert.

Überraschung: es ist die 1! Font-Size Einstellungen im CSS haben auf @media-Abfragen überhaupt keinen Einfluss.

Es steht tatsächlich auch in der Spec:

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations.

Aber wen hat das jetzt außer mir noch überrascht?

Wenn man eine Viewportabfrage basierend auf der tatsächlich eingestellten Fontsize machen will – beispielsweise am body – , braucht man eine @container-Abfrage:

body {
	container: body-container / inline-size;
}

@container body-container (width > 60em) {
  ... 
}

Rolf