Ausführliche Erklärung zur Verwendung von CSS-Medien

Bei der Website-Entwicklung ist die Bedeutung von CSS offensichtlich. Mit CSS können wir verschiedene Erscheinungsbildattribute wie Stil, Layout, Schriftarten usw. für die Website festlegen, um die Website attraktiver und lesbarer zu machen. Allerdings haben verschiedene Geräte (z. B. Desktop-Computer, Tablets, Mobiltelefone usw.) unterschiedliche Bildschirmgrößen und Auflösungen. Ohne CSS-Stileinstellungen für verschiedene Geräte kann der Anzeigeeffekt der Website recht unbefriedigend sein.

Eine Möglichkeit, dieses Problem zu lösen, ist die CSS Media Query-Funktion, die verschiedene CSS-Stile für verschiedene Geräte schreiben kann. Dieser Artikel bietet eine ausführliche Einführung in die Grundkonzepte, Syntax und Anwendungsfälle von CSS Media Query und ermöglicht Ihnen den Einstieg in diese praktische Technologie.

Was ist CSS Media Query

CSS Media Query ist eine in ein Stylesheet eingebettete bedingte Anweisung, die die Anwendung verschiedener CSS-Stile für verschiedene Bildschirmgrößen und Gerätetypen angibt. Durch CSS Media Query können wir ein responsives Website-Design (Responsive Web Design) implementieren, sodass die Website auf verschiedenen Geräten das beste Benutzererlebnis bieten kann.

Der CSS-Medienabfrageteil besteht aus Medientypen und Medieneigenschaften. Das Format ist wie folgt:

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

wobei mediatype den Medientyp angibt, dem CSS-Stile entsprechen sollen angewendet, wie z. B. Bildschirm, Druck, Handheld usw., während die Medienfunktion die Medieneigenschaften angibt, auf die CSS-Stile angewendet werden, wie z. B. Gerätebreite, Gerätehöhe, Richtung usw.

Medientyp

Der Medientyp bezieht sich auf den Gerätetyp, der zum Rendern des Dokuments verwendet wird. Zu den gängigen Medientypen gehören:

• all: Funktioniert auf allen Geräten.
• Drucken: Geeignet für Ausgabegeräte wie Drucker und Druckvorschauen.
• Bildschirm: Geeignet für Computerbildschirme, Tablets, Smartphones und andere Bildschirmgeräte.
• Handheld: Geeignet für Handheld-Geräte mit kleinen Bildschirmen (z. B. Smartphones).
• Sprache: Geeignet für Audiogeräte wie Bildschirmlesegeräte.

Medieneigenschaften

Zu den Medieneigenschaften gehören unter anderem die folgenden:

• width: Breite des Ansichtsfensters, Einheit px.
• height: Höhe des Ansichtsfensters, Einheit px.
• device-width: Gerätebreite.
• device-height: Gerätehöhe.
• Ausrichtung: Geräteausrichtung, Querformat (horizontal) oder Hochformat (vertikal).
• aspect-ratio: Das Verhältnis der Breite des Ansichtsfensters zur Höhe.
• Farbe: Farbbittiefe des Geräts.
• Auflösung: Geräteauflösung, Einheit dpi.

Durch die beiden oben genannten Kombinationen können wir verschiedene CSS-Stile für verschiedene Gerätetypen und Bildschirmeigenschaften definieren.

CSS Media Query-Nutzungsbeispiele

Im Folgenden finden Sie einige spezifische CSS Media Query-Nutzungsbeispiele, die benutzerdefinierte Stile für verschiedene Geräte und Bildschirmeigenschaften beinhalten.

1. Legen Sie unterschiedliche Stile für verschiedene Gerätetypen fest.

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

Die beiden oben genannten CSS-Codeteile wenden unterschiedliche Hintergrundfarben auf Computerbildschirme bzw. Smartphone-Bildschirme an.

2. Legen Sie verschiedene Stile für die Geräteausrichtung fest.

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

Die beiden oben genannten CSS-Codes legen unterschiedliche Hintergrundfarben für die Geräteausrichtung fest (horizontal oder vertikal).

3. Legen Sie unterschiedliche Stile entsprechend der Breite des Ansichtsfensters fest.

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

Die beiden oben genannten Teile des CSS-Codes wenden unterschiedliche Schriftgrößen basierend auf der Breite des Ansichtsfensters an.

4. Kombinieren Sie mehrere Bedingungen

Natürlich müssen im tatsächlichen Gebrauch mehrere Bedingungen entsprechend den spezifischen Umständen kombiniert werden. Wir möchten beispielsweise ein für Smartphones geeignetes Logobild festlegen, das jedoch nur wirksam wird, wenn die Breite des Anzeigefensters des Geräts kleiner oder gleich 800 Pixel ist. Zu diesem Zeitpunkt können Sie den folgenden Code verwenden:

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

In diesem CSS-Code verwenden wir handheld and (max-device-width: 800px)和(-webkit-min-device-pixel-ratio: 1.5) zwei Bedingungen. Ersteres gibt an, dass es sich bei dem Gerät um ein Handheld-Gerät handelt und die Breite des Geräteansichtsfensters weniger als 800 Pixel beträgt. Letzteres ist mit der WebKit-Rendering-Engine kompatibel und gibt an, dass das Pixelverhältnis des Geräts größer als 1,5 ist.

Zusammenfassung

Die CSS-Medienabfragefunktion ist ein wichtiger Bestandteil des responsiven Website-Designs und kann uns dabei helfen, verschiedene CSS-Stile für verschiedene Gerätetypen und Bildschirmeigenschaften zu schreiben. Durch die Einleitung dieses Artikels sollten Sie die grundlegenden Konzepte, Syntax und Anwendungsmethoden von CSS Media Query verstanden haben und diese verwenden können, um verfeinerte und personalisiertere Stile für Ihr Website-Design bereitzustellen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von CSS-Medien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!