So verwenden Sie das CSS-@media-Attribut

css @media-Attributdefinition und -verwendung

Mit der @media-Abfrage können Sie verschiedene Stile für verschiedene Medientypen definieren.

@media kann verschiedene Stile für unterschiedliche Bildschirmgrößen festlegen, insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich.

Wenn Sie die Browsergröße zurücksetzen, wird die Seite auch basierend auf der Breite und Höhe des Browsers neu gerendert.

Beispiel

Ändern Sie die Hintergrundfarbe (background-color), wenn die Dokumentbreite weniger als 300 Pixel beträgt

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

Syntax

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

Sie können auch verschiedene Stylesheets für verschiedene Medien verwenden

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

Medientyp

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-@media-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!