Machen CSS-Medien-Abfrage verwenden Sie die Größe des HTML-Dokuments anstelle des Browsers?

Question

Ich versuche, Media-Abfragen 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 ohne die Breite der Spalten ändern). Ich würde gerne in der Lage sein, dies mit em statt Pixel zu tun, so dass alles gut aussieht, wenn Sie Ihre Schriftgröße ändern. Allerdings, wenn ich die folgende verwenden:

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

Die Medienabfrage wird ausgelöst, wenn die minimale Breite des Fensters 42 erreicht * 16px, die Standardschriftgröße für meinen Browser (Safari), während die Breite des div # Seite wird 42 * 12px sein und die Schriftgröße vom HTML-Element erben. Ich möchte wirklich, dass die Medienabfragen auf der Breite des Textes basieren, den ich verwende, gibt es eine Möglichkeit, das zu tun?

Answer 1

Nein, Sie können nicht, weil in einer Medienabfrage „Relative Einheiten in Medien-Anfragen auf den Anfangswert basieren, was bedeutet, dass Geräte niemals auf den Ergebnissen der Erklärungen basieren. In HTML beispielsweise ist die Einheit 'em' relativ zum Anfangswert von 'font-size'. "(Media Query spec, Klausel 6 Units). Der Anfangswert von font-size ist medium, der browserabhängig einer physischen Größe zugeordnet wird (unabhängig von allem, was Sie in CSS festlegen 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, in Medienabfragen em zu verwenden, aber Sie müssen nur berücksichtigen, dass em dort die Standardschriftgröße des Browsers bedeutet und Sie den Multiplikator em entsprechend auswählen müssen.

Answer 2

Von W3C (http://www.w3.org/TR/CSS21/syndata.html)
Die ‚em‘ Einheit mit dem berechneten Wert der ‚font-size‘ Eigenschaft des Elements gleich ist welches es benutzt wird. Die Ausnahme ist , wenn 'em' im Wert der 'font-size' Eigenschaft selbst auftritt. In diesem Fall bezieht sich auf die Schriftgröße des übergeordneten Elements.

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

Hinweis: 42em wird wahrscheinlich nie 100% der Breite des Browserfensters betragen. Wenn Sie die @media so ändern, dass sie sich bei unterschiedlichen Bildschirmbreiten unterschiedlich verhält, erhalten Sie wahrscheinlich mehr von dem Effekt, den ich denke.

Answer 3

Ich habe gerade in der gleichen Sache suchen, 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 - in relativen Einheiten gesetzt - beziehen sich auf die gleiche Basisnummer auf jedem Gerät oder Browser (im Falle von Desktop-Browsern ist es 16px, kann aber unterschiedlich sein) andere Geräte oder wenn der Benutzer den Zoom ändert).

Also, wenn Sie Ihre HTML-Textgröße in einem Prozentsatz oder em-Takt dieses Wertes (für die Desktop-Entsprechung von 12px, verwenden Sie 75% oder 0.75em), und legen Sie dann Ihre Medien Abfragen basierend auf die Teilung des Pixels Breite um diesen Wert (für den Desktop-Äquivalent von 960px, verwenden Sie 60em), sollte alles auf jedem Gerät auf jeder Zoomstufe platziert werden.

Siehe auch diese link