Was macht „@media screen and (max-width: 1024px)' in CSS?

Verstehen von @media screen und (max-width: 1024px) in CSS

Die Begegnung mit unbekanntem CSS-Code kann rätselhaft sein. In einem aktuellen Fall hat ein Entwickler Code geerbt, der die folgende rätselhafte Zeile enthielt:

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

Um diese rätselhafte Zeile zu entschlüsseln, wollen wir uns mit der Bedeutung von Medienabfragen befassen.

Medienabfragen, wie Die im Code vorgestellten werden verwendet, um Stilregeln basierend auf bestimmten Kriterien bedingt anzuwenden. In diesem Fall werden folgende Kriterien geprüft:

1. @media screen: Dadurch wird sichergestellt, dass die CSS-Regeln nur auf Geräte angewendet werden, die als Browser der Desktop-Klasse identifiziert werden.

2. (max-width: 1024px):Diese Bedingung beschränkt die Anwendung der CSS-Regeln auf Geräte mit einer Browserfensterbreite (einschließlich Bildlaufleisten) von 1024 Pixeln oder weniger.

Basierend auf diesen Kriterien wird das CSS In den geschweiften Klammern eingeschlossene Regeln werden nur auf Geräte angewendet, die beide Bedingungen erfüllen. Sie zielen hauptsächlich darauf ab, das Styling auf Geräte wie das iPad und zu beschränken iPhone.

Es ist jedoch wichtig zu beachten, dass Desktop-Browserfenster mit einer Breite unter 1024 Pixel auch die CSS-Stile in Browsern erben, die die Medienabfrage mit maximaler Breite unterstützen.

Weitere Informationen Weitere Informationen finden Sie in der umfassenden Media Queries-Spezifikation unter: http://www.w3.org/TR/css3-mediaqueries/

Das obige ist der detaillierte Inhalt vonWas macht „@media screen and (max-width: 1024px)' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!