media query max-width bezieht sich auf die Ansicht Portgröße oder die Fenstergröße?

Question

Ich frage mich, ob die maximale Breite einer Medienabfrage bezieht sich auf die Ansicht Portgröße oder die Fenstergröße?

zum Beispiel habe ich diese Medien query:

@media screen and (max-width: 360px){} 

wird diese Medienabfrage in Aktion, wenn die Viewport Größe 360px ist oder die Fenstergröße 360px?

Answer 1

Es ist das Ansichtsfenster. Dies wird in der spec:

angegeben Die Medienbreite "Breite" beschreibt die Breite des Zielanzeigebereichs des Ausgabegeräts. Bei kontinuierlichen Medien ist dies die Breite des Ansichtsfensters (wie in CSS2, Abschnitt 9.1.1 [CSS21] beschrieben) einschließlich der Größe einer gerenderten Bildlaufleiste (falls vorhanden).

Dies gilt auch für Unteransichtsfenster im Hauptfenster des Browsers, z. B. für Framesets und Iframes. Wenn also ein Iframe eine Breite von 360 px oder weniger hat, wird Ihre Medienabfrage auch innerhalb dieses iframes angewendet.