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

245

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

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

Was passiert konkret in der ersten Zeile?

css media-queries Yarin
quelle

Antworten:

306

Das ist eine Medienabfrage. Es verhindert, dass das darin enthaltene CSS ausgeführt wird, es sei denn, der Browser besteht die darin enthaltenen Tests.

Die Tests in dieser Medienabfrage sind:

  1. @media screen- Der Browser identifiziert sich als in der Kategorie "Bildschirm". Dies bedeutet in etwa der Browser selbst Desktop-Klasse betrachtet - wie zB auf einen gegenüberliegenden älteren Handy-Browser (beachten Sie, dass das iPhone und anderer Smartphone - Browser, Sie identifizieren sich wie auf dem Bildschirm Kategorie zu sein) oder ein Screen - und dass es die Anzeige die Seite auf dem Bildschirm, anstatt sie zu drucken.

  2. max-width: 1024px- Die Breite des Browserfensters (einschließlich der Bildlaufleiste) beträgt 1024 Pixel oder weniger. ( CSS-Pixel, keine 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 max-widthMedienabfragen nicht unterstützen und viele Desktop-Browser breiter als 1024 Pixel sind).

Es gilt jedoch auch für Desktop-Browserfenster mit einer Breite von weniger als 1024 Pixel in Browsern, die die max-widthMedienabfrage unterstützen.

Hier ist die Spezifikation für Medienabfragen, die ziemlich gut lesbar ist:

Paul D. Waite
quelle
Wenn meine Bildschirmbreite über 1200px liegt, wie in @media Bildschirm angeben
Sanoj Lawrence
2
Sie können einfach (min-width: 1200px) anstelle von max-width verwenden, oder Sie können es einfach als reguläres CSS ohne Medienabfrage verwenden und 'max-width' verwenden, um dies zu überschreiben, wenn es auf ein kleineres Gerät geht
MintWelsh
Gibt es eine Möglichkeit, das Styling nur auf dem Desktop (überhaupt NICHT mobil) zu bewirken, während Sie die Größe des Ansichtsfensters ändern? Wenn ich also die Größe meines Browsers manuell auf "maximale Breite 720 Pixel breit" ändere, wird eine Medienanweisung verwendet, die Sie auf einem Desktop erkennt, der nicht mobil ist, und Sie befinden sich jetzt beispielsweise unter 720 Pixel?
Wharfdale
@ JordanC26: Es sieht so aus, als würden Sie eine Frage stellen, und dafür möchten Sie die Schaltfläche "Frage stellen" in der oberen rechten Ecke des Bildschirms. Bevor Sie dies jedoch verwenden, möchten Sie möglicherweise definieren, was Sie unter "Desktop" und "Mobil" verstehen. Ist ein Microsoft Surface-Handy oder ein Desktop? Warum? Was ist mit zukünftigen Geräten, die noch nicht erfunden wurden?
Paul D. Waite
55

Es beschränkt die dort definierten Stile auf den Bildschirm (z. B. nicht Drucken oder andere Medien) und beschränkt den Bereich weiter auf Ansichtsfenster mit einer Breite von 1024 Pixel oder weniger.

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

Chris Bentley
quelle
10

Es heißt: Wenn die Seite mit einer Auflösung von maximal 1024 Pixel Breite auf dem Bildschirm gerendert wird, 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 ..

Lorenzo
quelle
3
Ich würde nicht davon ausgehen, dass er das weiß.
Jcolebrand
6

In meinem Fall wollte ich mein Logo auf einer Website zentrieren, wenn der Browser 800pxoder weniger hat, dann habe ich dies mithilfe des @mediaTags getan :

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

Es hat bei mir funktioniert, hoffe jemand findet diese Lösung nützlich. :) Weitere Informationen finden Sie hier .

yehanny
quelle
1

Wenn die Bildschirmgröße 1024 beträgt, gilt dies nur unter den CSS-Regeln.

Kumar Nitesh
quelle
1

Wenn Ihre Medienabfragebedingung erfüllt ist, funktioniert Ihr CSS mit dieser Bedingung. Dies bedeutet, dass CSS innerhalb der Bedingung Pixelgröße Ihrer Medienabfrage beeinflusst wird. Wenn die Bedingung fehlschlägt, bedeutet dies, dass die Breite des Geräts größer als 1024 Pixel ist und Ihr CSS nicht funktioniert. Weil Ihre Medienabfragebedingung falsch ist.

max-width ist Ihr maximales CSS-Limit bis zu dieser Breite.

Anup
quelle
0

Erwähnenswert ist auch, dass Sie sowohl 'em' als auch 'px' verwenden können - Blogs und textbasierte Websites tun dies, da der Browser dann Layoutentscheidungen relativ zum Textinhalt trifft.

In Wordpress Twentysixteen wollte ich, dass mein Slogan sowohl auf Handys als auch auf Desktops angezeigt wird, also habe ich dies in mein untergeordnetes Thema style.css eingefügt

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

Es zielt auf eine bestimmte Funktion ab, 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 gibt an, ob das Gerät, auf dem dieses Programm ausgeführt wird, einen Bildschirm mit einer Breite von 600 Pixel oder weniger als 600 Pixel hat. In diesem Fall muss unser Programm diesen Teil ausführen.

Shahin Ghasemi
quelle