nicht angemeldet
Hallo werte Selfgemeinde!
Ich bin gerade auf ein "Problem" gestoßen und würde gerne eure Meinung dazu hören/ lesen.
Und zwar geht es um Media Queries auf Basis von EM als Einheit.
Ich möchte hier jetzt nicht näher auf die Gründe für EM basierte Media Queries gegenüber solchen unter der Verwendung von PX als Einheit eingehen. Wer sich diesbezüglich "schlau" machen möchte, wird bei Google problemlos fündig.
Jetzt hat man bei der Verwendung von Media Queries ja grundsätzlich zwei Möglichkeiten.
Entweder man verwendet "überlappende" (overlapping) MQs, oder sich "stapelnde" (stacking) MQs.
Beide Varianten haben, wie eigentlich immer im Webdesign, Vor- und Nachteile.
Persönlich sehe ich u.a. einen der Vorteile von sich stapelnden MQs darin, dass man nicht darauf achten muss, ggf. vorherige Anweisungen wieder zu überschreiben. Aber auch das soll jetzt nicht näher erörtert werden. Gehen wir also bitte einmal davon aus, dass ich sich stapelnde MQs mit EMs als Einheit verwenden möchte.
Dabei tritt jetzt folgendes Problem auf:
Bei sich stapelnden MQs muss die Abgrenzung ja normalerweise pixelgenau erfolgen. Und genau hierin besteht das Problem bei der Verwendung von EMs.
Beispiel:
Angenommen der User hat seine Basis-Schriftgröße im Browser so eingestellt, dass diese 16px entspricht. Dann wären die beiden folgenden MQ Regeln identisch
@media only screen and (max-width: 20em) {...}
@media only screen and (max-width: 320px) {...}
Die nächste Regel würde bei Verwendung von PX als Einheit dann wie folgt aussehen:
@media only screen and (min-width: 321px) and (max-width: ...px) {...}
Um diese Regel jetzt aber mit EMs zu formulieren, muss man rechnen. Aufgrund unserer obigen Annahme, entspricht 1px jetzt ja 1/16em, oder dezimal 0,0625em. Und unsere MQ Regel sähe also folgendermaßen aus:
@media only screen and (min-width: 20.0625em) and (max-width: ...em) {...}
Hat ein User aber seine Basis-Schriftgröße bspw. auf 24px eingestellt, dann ergibt unser Dezimalwert für 1px in EM: 0,0625 * 24 = 1,5
Und da Browser am Ende ja nur mit ganzzahligen Pixelwerten arbeiten können, wird dieser Wert also auf 2 aufgerundet. Und schon haben wir eine "Lücke" in unserem MQ Regelhaufen, die u.U. dazu führen kann, dass keine Regel "matched".
Umgekehrt, falls ein User eine kleinere Basis-Schriftgröße eingestellt hat, besteht ein ähnliches Problem. In diesem Fall besteht die Möglichkeit, dass sich Regeln überschneiden!
Die Lösung für dieses Problem wäre ganz einfach, nämlich wenn Browser die calc() Syntax in MQs unterstützen würden. Wenn man also schreiben könnte:
@media only screen and (min-width: (20em + 1px)) and (max-width: ...em) {...}
Wie seht, bzw. macht ihr das?
Gruß Gunther