English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS-Medienabfragen ermöglichen es Ihnen, Dokumente zu formatieren, um sie auf verschiedenen Größen von Ausgabegeräten korrekt anzuzeigen.
Medienabfragen ermöglichen es Ihnen, die Anzeige der Webseite für bestimmte Gerätetreiber (z.B. Handys, Tablets, Desktops usw.) zu personalisieren, ohne die Markierung zu ändern. Medienabfragen bestehen aus Mediengattungen und Null oder mehreren Ausdrücken, die mit bestimmten Medienfunktionen (z.B. Gerätbreite oder Bildschirmauflösung) übereinstimmen.
Da Medienabfragen logische Ausdrücke sind, können sie als true oder false interpretiert werden. Wenn die im Medienabfrage angegebene Mediengattung mit dem Gerätetyp des angezeigten Dokuments übereinstimmt und alle Ausdrücke in der Medienabfrage erfüllt sind, ergibt die Abfrage true. Wenn die Medienabfrage true ist, werden die entsprechenden Stylenblätter oder Styleregeln auf das Zielgerät angewendet. Dies ist ein einfaches Beispiel für die Standardgeräte-Medienabfrage.
/* Smartphones (Porträt und Landschaft) ---------- */
@media screen and (min-width: 320px) und (max-width: 480px){
/* styles */
}
/* Smartphones (Porträt) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (Landschaft) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
/* Tablets, iPads (Porträt und Landschaft) ---------- */
@media screen and (min-width: 768px) und (max-width: 1024px){
/* styles */
}
/* Tablets, iPads (Porträt) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Tablets, iPads (Landschaft) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Desktops und Laptops ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Große Bildschirme ---------- */
@media screen and (min-width: 1824px){
/* styles */
}Testen Sie heraus‹/›Hinweis:Medienabfragen sind eine ausgezeichnete Methode, um responsive Layouts zu erstellen. Mit Medienabfragen können Sie die Webseite für verschiedene Geräte wie Smartphones oder Tablets auf unterschiedliche Weise anpassen, ohne die tatsächlichen Inhalte der Seite zu ändern.
Sie können CSS-Medienabfragen verwenden, um die Breite der Webseite und damit verbundene Elemente zu ändern, um den Benutzern auf verschiedenen Geräten den besten Betrachterlebnis zu bieten.
Nachfolgende Styleregeln ändern automatisch die Breite des Containerelements basierend auf der Bildschirm- oder Sichtbereichsgröße. Zum Beispiel, wenn die Sichtbereichsbreite kleiner als768Pixel, es wird den Sichtbereichsbreite100%, wenn es größer als768Pixel, aber kleiner1024Pixel, dann wird75Pixel, und so weiter.
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Mobile Phones (Portrait und Landschaft) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* Tablets und iPads (Portrait und Landschaft) ---------- */
@media screen and (min-width: 768px) und (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* Niedrigauflösende Desktops und Laptops ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* Hochauflösende Desktops und Laptops ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}Testen Sie heraus‹/›Hinweis:CSS kann auf Elementen verwendet werden3 Boxgröße-AnpassungEigenschaften, um intuitivere und flexiblere Layouts zu erstellen.
Sie können auch CSS-Medienabfragen verwenden, um Ihr mehrspaltiges Website-Layout anpassungsfähiger zu machen und nur wenig Anpassung für Geräte erforderlich ist.
Wenn die Viewport-Größe größer oder gleich768Pixel, dann wird die folgende Styleregel ein Zweispaltenlayout erstellen, aber wenn kleiner oder gleich768Pixel, es wird in einem Spaltenlayout dargestellt.
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}Testen Sie heraus‹/›