web-dev-qa-db-ger.com

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

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?

244
Yarin

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 "Bildschirm" -Kategorie. Dies bedeutet ungefähr, dass der Browser sich selbst als Desktop-Klasse betrachtet - im Gegensatz zu z. ein älterer Handy-Browser (beachten Sie, dass das iPhone und andere Smartphone-Browser dies tun sich als Bildschirmkategorie) oder Bildschirmleser ausweisen - und die Seite auf dem Bildschirm anzeigen, 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-width in Medienabfragen nicht unterstützen und viele Desktop-Browser breiter als 1024 Pixel ausgeführt werden ).

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

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

305
Paul D. Waite

Es beschränkt die dort definierten Stile auf den Bildschirm (z. B. nicht auf Druckmedien 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/

55
Chris Bentley

Es heißt: Wenn die Seite mit einer Auflösung von maximal 1024 Pixel 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 sich hier für Details an.

10
Lorenzo

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

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

Ich hoffe, jemand findet diese Lösung hilfreich. :) Weitere Informationen finden Sie unter this .

5
yehanny

Das ist Media Queries . Hiermit können Sie einen Teil der CSS-Regeln nur auf bestimmte Geräte in bestimmten Konfigurationen anwenden.

5
Crozin

Dies bedeutet, dass bei einer Bildschirmgröße von 1024 nur die CSS-Regeln berücksichtigt werden.

1
Kumar Nitesh

Wenn Ihre Medienabfragebedingung erfüllt ist, funktioniert Ihr CSS mit dieser Bedingung. Dies bedeutet, dass CSS innerhalb der Bedingung der Medienabfrage die Pixelgröße beeinflusst, oder, falls die Bedingung fehlschlägt, wenn die Breite des Geräts größer als 1024px ist, funktioniert Ihr CSS nicht.

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

1
Anup

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

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

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

Es zielt auf eine bestimmte Funktion ab, um andere Codes auszuführen ...

Zum Beispiel:

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

  }

das obige Snippet besagt, dass in diesem Fall unser Programm diesen Teil ausführen muss, wenn das Gerät, auf dem dieses Programm ausgeführt wird, einen Bildschirm mit 600px oder weniger als 600px Breite hat.

0
shahin gh