Beispielcode für die Verwendung von @media in CSS3 zur Anpassung einer Webseite

Heutzutage wird die Bildschirmauflösung von Computermonitoren immer höher, doch die Auflösung von Mobilgeräten wie Mobiltelefonen kann nicht viel höher sein. Immer mehr Websites beginnen damit, ihre Seiten an verschiedene Auflösungen anzupassen. So werden grundlegende Inhalte in kleinen Auflösungen, alle Funktionen in großen Auflösungen und sogar mehrere Versionen auf mehreren Ebenen angezeigt.

1. @media in CSS2

Obwohl CSS2 das @media-Attribut unterstützt, kann es nur wenige Funktionen implementieren und wird im Allgemeinen nur verwendet, um spezielles CSS für den Druck zu definieren.

@media sMedia { sRules }

1.1 Beispiele

// Stelle die Schriftgröße für die Anzeige ein @media screen {
BODY {Schriftgröße:12pt; }
}
//Stelle die Schriftgröße für den Drucker ein @media print {
@import "drucken.css"
BODY {Schriftgröße: 8pt;}
}

2. @media in CSS3

Das @media-Attribut hat sich in CSS3 zu einer Art media queries entwickelt. In CSS3 können Abfrageanweisungen verwendet werden, um verschiedene Bildschirmtypen abzugleichen.

Grammatik:

@media Medientyp und|nicht|nur (Medienfunktion) {
CSS-sRegeln;
}

1. Medientyp Medientyp: alle, Drucken (Drucker), Bildschirm (Computerbildschirm, Mobiltelefon usw.), Sprache (Bildschirmlesegerät und andere Geräte)
2. media_query und | nicht | nur Media Query-Bedingungsoperation
3. media_feature Medienfunktionen, wie z. B. maximale und minimale Breite.

Bestimmen Sie den Medientyp (Objekttyp), um unterschiedliche Anzeigen zu erzielen. Mit dieser Funktion kann CSS präziser auf verschiedene Medientypen reagieren.

2.1 Beispiele

body{background:blue;}/*Breite zwischen 500px-800px + Höhe zwischen 100px-400px blau*/
@media screen and (max-width:500px){body{background:green;}}/*Grün, wenn die Breite weniger als 500px beträgt*/
@media screen and (min-width:800px){body{background:red;}}/*Rot, wenn die Breite größer als 800px ist*/
@media screen and (max-height:100px){body{background:yellow;}}/*Gelb, wenn die Höhe weniger als 100px beträgt*/
@media screen and (min-height:400px){body{background:pink;}}/*Pink, wenn die Höhe größer als 400px ist*/

2.2 Medieneigenschaften

Zusammenfassen

Damit ist dieser Artikel über die Verwendung von @media in CSS3 zur Anpassung von Webseiten abgeschlossen. Weitere relevante Inhalte zur Anpassung von Webseiten mit CSS3-Medien finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!