CSS-Medienabfragen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS2 führte Medientypen ein

Die in CSS2 eingeführte Regel @media ermöglichte die Definition verschiedener Stilregeln für verschiedene Medientypen.

Beispiele: Sie könnten einen Satz Stilregeln für Computerbildschirme haben, einen für Drucker, einer für Handgeräte, einer für Fernsehgeräte usw.

Leider wurden diese Medientypen von anderen Geräten nie umfassend unterstützt als der Druckmedientyp.


CSS3 führte Medienabfragen ein

Medienabfragen in CSS3 erweiterten die Idee der CSS2-Medientypen: Anstatt nach einem Gerätetyp zu suchen, Sie betrachten die Leistungsfähigkeit des Gerät.

Mit Medienabfragen können viele Dinge überprüft werden, wie zum Beispiel:

  • Breite und Höhe des Ansichtsfensters

  • Breite und Höhe des Geräts

  • Ausrichtung (befindet sich das Tablet/Telefon im Quer- oder Hochformat?)

  • Auflösung

Die Verwendung von Medienabfragen ist eine beliebte Technik zur Bereitstellung eines maßgeschneiderten Stils Blatt auf Desktops, Laptops, Tablets und Mobiltelefone (z. B. iPhone und Android-Telefone).


Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die @media-Regel vollständig unterstützt.

Property
@media 21.0 9.0 3.5 4.0 9.0

Syntax für Medienabfragen

Eine Medienabfrage besteht aus einem Medientyp und kann einen oder mehrere enthalten Ausdrücke, die entweder wahr oder falsch aufgelöst werden.

@media not|only mediatype and  (expressions) {
  CSS-Code;
}

Das Ergebnis der Abfrage ist true, wenn der angegebene Medientyp mit dem Gerätetyp des Dokuments übereinstimmt angezeigt wird und alle Ausdrücke in der Medienabfrage wahr sind. Wenn eine Medienabfrage wahr ist, gilt dies auch für das entsprechende Stylesheet oder die entsprechenden Stilregeln angewendet und folgt dabei den normalen Kaskadenregeln.

Sofern Sie nicht die Operatoren „not“ oder „only“ verwenden, ist der Medientyp optional und der Der Typ alle wird impliziert.

Sie können auch unterschiedliche Stylesheets für unterschiedliche Medien verwenden:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">


CSS3-Medientypen

all

Wird für alle Medientypgeräte verwendet

print

Wird für Drucker verwendet

screen

Wird für Computerbildschirme, Tablets, Smartphones usw. verwendet.

speech

Wird für Screenreader verwendet, die die Seite laut vorlesen


Einfache Beispiele für Medienabfragen

Eine Möglichkeit, Medienabfragen zu verwenden, besteht darin, direkt in Ihrem Stylesheet einen alternativen CSS-Abschnitt zu haben.

Das folgende Beispiel ändert die Hintergrundfarbe in Hellgrün, wenn die Das Ansichtsfenster ist 480 Pixel breit oder breiter (wenn das Ansichtsfenster kleiner als ist). 480 Pixel, die Hintergrundfarbe ist rosa):

Beispiel

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>


Das folgende Beispiel zeigt ein Menü, das links auf der Seite angezeigt wird, wenn Das Ansichtsfenster ist 480 Pixel breit oder breiter (wenn das Ansichtsfenster kleiner als ist). 480 Pixel, das Menü wird über dem Inhalt angezeigt):

Beispiel

@media screen and (min-width: 480px) {
  #leftsidebar 
{width: 200px; float: left;}
  #main 
{margin-left: 216px;}
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {
  float: none;
  width: auto;
}

#menulist {
  margin: 0;
  padding: 0;
}

.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>

<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>
  
  <div id="main">
    <h1>Resize the browser window to see the effect!</h1>
    <p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
  </div>
</div>

</body>
</html>


Weitere Beispiele für Medienabfragen

Weitere Beispiele zu Medienabfragen finden Sie auf der nächsten Seite: CSS MQ-Beispiele.


CSS @media-Referenz

Eine vollständige Übersicht über alle Medientypen und Funktionen/Ausdrücke finden Sie unter @media-Regel in unserer CSS-Referenz.