nicht angemeldet
Hallo,
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".
Ja, gut. Das stimmt im Prinzip. Das Problem kann ich im Firefox nachvollziehen. Es kann sein, dass bei einem Pixel nach der Schwelle keine der beiden Stacked Media Queries angewendet wird. Das ist natürlich fies, weil dann das Layout kaputt sein kann.
ABER: Ist das nicht völlig hypothetisch? Dass der Nutzer die Schriftgröße so ändert, halte ich für unwahrscheinlich. Dass er sie so ändert, dass ein Rundungsproblem entstehen kann, ist noch unwahrscheinlicher. Dass der Viewport zusätzlich exakt Schwellenwert + 1px groß ist, verringert die Wahrscheinlichkeit weiter.
Realistisch gesehen gibt es Schwellen wie 320, 480, 640, 960, 768, 1024 usw. Dazwischen gibt es theoretisch gesehen alles, aber praktisch ist das sehr selten. Da muss ich mein Browserfenster auf genau 321, 481, 961, 769, 1025 usw. ziehen und dann auch noch wild an der Basis-Schriftgröße drehen, damit der Fehler auftritt. Wer das macht: Selbst schuld, kein Mitleid. Genauer geht Responsive Design gerade noch nicht.
Wenn ich das als realistisches Problem sähe, würde eher Overlapping Media Queries nutzen oder Stacked und Overlapping kombinieren, sodass im Fehlerfalle ein Grundlayout angewendet wird.
Ich sehe es aber nicht als realistisches Problem, daher würde mit gutem Gewissen min-width: 20.0625em verwenden. :)
Grüße,
Mathias