Ich versuche, Medienabfragen zu verwenden, um die Breite eines Elements in Chunks basierend auf der Breite des Fensters zu ändern (dadurch kann ich die Anzahl der Spalten auf der Seite erhöhen, ohne dass sich die Breite der Spalten ändert). Ich würde gerne in der Lage sein, dies mit em statt Pixel zu tun, damit alles gut aussieht, wenn Sie Ihre Schriftgröße ändern. Wenn ich jedoch Folgendes benutze:
%Vor%Die Medienabfrage wird ausgelöst, wenn die minimale Breite des Fensters 42 * 16px, die Standardschriftgröße für meinen Browser (Safari), erreicht, während die Breite der div # Seite 42 * 12px beträgt und die Schriftgröße von erbt das HTML-Element. Ich möchte wirklich, dass die Medienabfragen auf der Breite des Textes basieren, den ich verwende, gibt es eine Möglichkeit, das zu tun?
Nein, das ist nicht möglich, weil in einer Medienabfrage "Relative Einheiten in Medienabfragen auf dem Anfangswert basieren, was bedeutet, dass Einheiten niemals auf Deklarationsergebnissen basieren. In HTML beispielsweise ist die Einheit 'em' relativ zum Anfangswert von 'font-size'. "(Media Query spec, Klausel 6 Einheiten ). Der Anfangswert von font-size ist medium , dem ein Wert zugeordnet ist eine physische Größe in einer Browser-abhängigen Weise (unabhängig von allem, was Sie in CSS einstellen können).
Die Schlussfolgerungen hängen davon ab, wie Sie die Schriftgröße festlegen. Wenn Sie die Schriftgröße des Wurzelelements in Pixeln festlegen, ist es logisch, Pixel auch in Medienabfragen zu verwenden, da die Verwendung von em keine Flexibilität bietet. Wenn Sie die Schriftgröße des Wurzelelements als Prozentsatz festlegen, ist es sinnvoll, em in Medienabfragen zu verwenden, aber Sie müssen nur berücksichtigen, dass em die Standardschriftgröße des Browsers dort bedeutet und Sie den Multiplikator auswählen müssen von em entsprechend.
Von W3C (http://www.w3.org/TR/CSS21/syndata.html)
Die Einheit 'em' ist gleich dem berechneten Wert der Eigenschaft 'font-size' des Elements, auf dem sie verwendet wird. Die Ausnahme ist , wenn 'em' im Wert der Eigenschaft 'font-size' selbst auftritt. In diesem Fall bezieht sich auf die Schriftgröße des übergeordneten Elements .
Hinweis: 42em wird wahrscheinlich nie 100% der Breite des Browserfensters betragen. Wenn Sie die @ media so ändern, dass sie sich für die verschiedenen Bildschirmbreiten (max-width:1200px) , (max-width:1024px) anders verhält, werden Sie wahrscheinlich mehr von dem Effekt bekommen, den Sie suchen.
Ich habe gerade nach der gleichen Sache gesucht, und AFAIK gibt es keine Möglichkeit, die "native" Schriftgröße des Browsers / Geräts zu ändern; aber das ist eigentlich gut, wenn man es auf eine bestimmte Art betrachtet.
Die media-query und das html-Tag beziehen sich - wenn sie in relativen Einheiten gesetzt sind - auf die gleiche Basisnummer auf jedem Gerät oder Browser (im Fall von Desktop-Browsern ist es 16px, kann aber auch anders sein) Geräte oder wenn Benutzer ihren Zoom ändert).
Wenn Sie also Ihre HTML-Textgröße in einem Prozentwert oder einem em-Wert für diesen Wert festlegen (für den Desktop entspricht 12px 75% oder 0.75em), und legen Sie dann Ihre Medienabfragen basierend auf dem Teilen der Pixelbreite fest durch diesen Wert (für den Desktop entspricht 960px, verwenden Sie 60em), sollte alles auf jedem Gerät bei jeder Zoomstufe platziert werden.
Siehe auch diesen Link
Tags und Links html css css3 viewport media-queries