CSS-Dokumente
CSS-Medienabfrage und Responsive Design
90 % des Traffics im Web kommen von Mobilgeräten. Deshalb sollten die gestalteten Websites ein responsives Design haben, das für den mobilen Einsatz geeignet ist, und die CSS-Medienabfragestruktur spielt dabei eine große Rolle.
Die Medienabfragestruktur wird verwendet, um den Inhalt auf großen Bildschirmen angemessen auf dem kleinen Bildschirm anzuzeigen oder um zu verhindern, dass der Seiteninhalt bei verschiedenen Bildschirmgrößen überläuft und scrollt. Beim Codieren von Websites werden diese mit responsiven CSS-Codes für unterschiedliche mobile Bildschirmgrößen optimiert.
Mit Media Query können CSS-Codes auf HTML-Elemente bei bestimmten Bildschirmbreiten angewendet werden.
Während beispielsweise die <p>-Tags auf einer Seite 17 Pixel groß sind, kann die Schriftgröße des <p>-Tags auf 14 Pixel eingestellt werden, um das Verhältnis auf Bildschirmen mit weniger als 600 Pixeln beizubehalten.
Medienabfrage min-width.
Wenn min-width verwendet wird, sind die unter der Medienabfrage geschriebenen CSS-Codes für den angegebenen Pixelwert gültig.
Wie im Beispiel unten ist die Schriftgröße des p-Tags mit 17 Pixeln angegeben, bis zu einem Maximum von 751 Pixeln.
@media (min-width: 751px) {
p {
font-size: 17px;
}
}Medienabfrage max-width.
Wenn max-width verwendet wird, sind die unter der Medienabfrage geschriebenen CSS-Codes für weniger als den angegebenen Pixelwert gültig.
Wie im Beispiel unten ist die Schriftgröße des p-Tags mit 14 Pixeln bis maximal 750 Pixel angegeben.
@media (max-width: 750px) {
p {
font-size: 14px;
}
}Orientation: Landscape
Orientation: Bei Verwendung im landscape sind unter der Medienabfrage geschriebene CSS-Codes gültig, wenn mobile Geräte in horizontaler Position platziert werden.
Im folgenden Beispiel wird der CSS-Code angegeben, der die Farbe des Felds ändert, wenn das mobile Gerät horizontal ausgerichtet ist.
Vertical
Horizontal
div {
height: 100px;
width: 100px;
background-color: bisque;
}
@media (orientation: landscape) {
div {
background-color: brown;
}
}Orientation: Portrait
Orientation: Bei der Verwendung im portrait sind unter der Medienabfrage geschriebene CSS-Codes gültig, wenn sich mobile Geräte in vertikaler Position befinden.
Vertical
Horizontal
h1 {
font-weight: 100;
}
@media (orientation: portrait) {
h1 {
font-weight: bold;
}
}Kompatibilität mit älteren Browsern
Das einzige in der Medienabfrage verwendete Konzept verhindert die Ausführung ungültiger Medienabfragen in älteren Browsern. In neuen Browsern hat es keine Auswirkung.
@media only screen and (max-width: 750px) {...}Medienabfrage und Ansichtsfenster
Damit die Medienabfragestruktur funktioniert, muss das Viewport-Meta-Tag zum <head></head>-Tag im Quellcode der Seite hinzugefügt werden.
<meta name="viewport" content="width=device-width, initial-scale=1">
Verweise:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries