Was bedeutet @media Bildschirm und (max-width: 1024px) in CSS?

Ich habe dieses Stück Code in einer CSS-Datei gefunden, die ich geerbt habe, aber ich kann daraus keinen Sinn machen:

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

Genauer gesagt, was passiert in der ersten Zeile?

Das ist eine Medienanfrage. Es verhindert, dass das darin enthaltene CSS ausgeführt wird, wenn der Browser die darin enthaltenen Tests nicht besteht.

Die Tests in dieser Medienabfrage sind:

  1. @media screen – Der Browser identifiziert sich selbst in der Kategorie “screen”. Dies bedeutet in etwa, dass sich der Browser als Desktop-class versteht – im Gegensatz zu zB einem älteren Handy-Browser (beachten Sie, dass sich das iPhone und andere Smartphone-Browser in der Bildschirmkategorie identifizieren) oder einem Bildschirmleser – und das wird angezeigt die Seite auf dem Bildschirm, anstatt es zu drucken.

  2. max-width: 1024px – Die Breite des Browserfensters (einschließlich der Bildlaufleiste) beträgt 1024 Pixel oder weniger. ( CSS-Pixel, nicht Gerätepixel .)

Dieser zweite Test legt nahe, dass dies das CSS auf das iPad, iPhone und ähnliche Geräte beschränken soll (da einige ältere Browser die max-width in Medienabfragen nicht unterstützen und viele Desktop-Browser mehr als 1024 Pixel umfassen).

Es gilt jedoch auch für Desktopbrowser-Fenster, die weniger als 1024 Pixel breit sind, in Browsern, die die Medienabfrage mit max-width .

Hier ist die Media Queries-Spezifikation, die ziemlich gut lesbar ist:

Es beschränkt die dort definierten Stile auf den Bildschirm (z. B. nicht gedruckt oder andere Medien) und begrenzt den scope auf Ansichtsfenster mit einer Breite von 1024 Pixeln oder weniger.

http://www.css3.info/preview/media-queries/

Es heißt: Wenn die Seite auf dem Bildschirm mit einer Auflösung von maximal 1024 Pixel Breite gerendert wird, dann wenden Sie die folgende Regel an.

Wie Sie vielleicht bereits wissen, können Sie CSS auf einen Medientyp ausrichten, der Handheld, Bildschirm, Drucker usw. sein kann.

Schauen Sie hier für Details.

Das sind Medienabfragen . Sie können einen Teil der CSS-Regeln nur auf bestimmte Geräte in einer bestimmten Konfiguration anwenden.

In meinem Fall wollte ich mein Logo auf einer Website 800px , wenn der Browser 800px oder weniger hat, dann habe ich das mit dem @media Tag @media :

 @media screen and (max-width: 800px) { #logo { float: none; margin: 0; text-align: center; display: block; width: auto; } } 

Es hat für mich funktioniert, hoffe jemand findet diese Lösung nützlich. 🙂 Weitere Informationen finden Sie hier .

Das bedeutet, wenn die Bildschirmgröße 1024 ist, dann nur unter CSS-Regeln.

Wenn Ihre Medienabfragebedingung wahr ist, funktioniert Ihre css mit dieser Bedingung. Das bedeutet, dass CSS innerhalb der Bedingung Ihrer Medienabfrage die Pixelgröße beeinflusst. Wenn die Bedingung nicht erfüllt wird, bedeutet dies, dass die Breite des Geräts größer als 1024px ist Work.When Ihre Media-Abfrage-Bedingung falsch. max-width ist Ihre maximale CSS-Grenze bis zu dieser Breite.

Sie können auch “em” und “px” verwenden – Blogs und textbasierte Websites machen das, weil der Browser Layoutentscheidungen relativ zum Textinhalt vornimmt.

Auf WordPress TwentySixteen wollte ich meinen Tagline sowohl auf Handys als auch auf Desktops anzeigen lassen, also habe ich das in mein Child Theme style.css eingefügt

 @media screen and (max-width:59em){ p.site-description { display: block; } } 

Es zielt auf eine bestimmte function, um einige andere Codes auszuführen …

beispielsweise:

 @media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } 

Das obige Snippet sagt, wenn das Gerät, das dieses Programm ausführt Bildschirm mit 600px oder weniger als 600px Breite haben, in diesem Fall muss unser Programm diesen Teil ausführen.