Responsive Web Design - Medien-Anfragen
: Medien (Medien) haben eine Abfrage auf CSS3 eingeführt CSS3 @media Abfragen .
Verwenden Sie @media Abfragen können Sie verschiedene Stile für verschiedene Medientypen definieren.
Beispiele
Wenn das Browserfenster kleiner als 500px ist, wird der Hintergrund hellblau ändern:
body {
background-color: lightblue;
}
}
Versuchen »
Fügen Sie einen Haltepunkt
Im vorherigen Tutorial werden wir die Zeilen und Spalten verwenden, um Webseiten zu erstellen, ist es anspricht, aber auf dem kleinen Bildschirm und nicht freundlich zeigen.
Medien-Anfragen können uns helfen, dieses Problem zu lösen. Wir können in der Mitte des Entwurfs Design, verschiedene Haltepunkte haben unterschiedliche Effekte einen Haltepunkt hinzufügen.
Desktop-
Mobile Geräte
Verwenden Sie Medienanfragen Stützpunkte 768px hinzufügen:
Beispiele
Wenn der Bildschirm (das Browser-Fenster) weniger als 768. ist die Breite jeder Säule 100%:
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Versuchen »
Priorität für das mobile Endgerät Design
Priorität bedeutet, sich bewegende Ende Desktops und andere Geräte entwickelt Priorität dem mobilen Endgerät Design zu geben.
Das bedeutet, dass wir einige Änderungen an der CSS zu machen.
Wir screenen weniger als 768px in Stiländerungen geändert im gleichen Stil werden müssen, wenn der Bildschirm breiter als 768px ist. Im Folgenden sind Beispiele für mobile End-Priorität:
[Klasse * = "Zusammenarbeit"] {
Breite: 100%;
}
@media nur Bildschirm und (min-width : 768px) {
/ * Für Desktop - : * /
.col-1 {width: 8,33% ;}
.col-2 {width: 16,66% ;}
.col-3 {width: 25% ;}
.col-4 {width: 33,33% ;}
.col-5 {width: 41,66% ;}
.col-6 {width: 50% ;}
.col-7 {width: 58,33% ;}
.col-8 {width: 66,66% ;}
.col-9 {width: 75% ;}
.col-10 {width: 83,33% ;}
.col-11 {width: 91,66% ;}
.col-12 {width: 100% ;}
}
Andere Grenzwerte
Sie können einen Haltepunkt nach ihren Bedürfnissen hinzufügen.
Wir können auch Tablet und Handy-Geräte Haltepunkte zu setzen.
Desktop-
Tablette
Mobile Geräte
600px Bildschirm beim Hinzufügen von Medienanfragen und stellen Sie den neuen Stil (aber weniger als der Bildschirm ist größer als 600px 768px):
Beispiele
Beachten Sie, dass zwei Klassenstile gleich sind, aber unterschiedliche Namen (Zusammenarbeit und col-m-):
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
Versuchen »
Der obige Code sieht mehr als eine Menge, aber er kann automatisch eingestellt werden entsprechend der Bildschirmgröße von verschiedenen Stilen, so ist es immer noch sehr notwendig.
HTML Beispiele
Für Desktop-:
Der erste und der dritte Abschnitt über drei. Der Zwischenabschnitt Cross-Domain-6.
Für Tablet-Geräte:
Der erste Cross-Domain-3, der zweite Abschnitt Spanning 9 ist der dritte Teil einer Cross-Domain-12:
<Div class = "col-3 col-m-3"> ... </ div>
<Div class = "col-6 col-m-9"> ... </ div>
<Div class = "col-3 col-m-12"> ... </ div>
</ Div>
Richtung: horizontal Bildschirm / vertikal Bildschirm
In Kombination mit CSS Media Queries können Sie erstellen, um unterschiedliche Ausrichtung der Vorrichtung (Landschaft Landschaft, Porträt Porträt, etc.) das Layout anzupassen.
Syntax:
orientation：portrait | landscape
- Porträt: Geben Sie das Ausgabegerät im sichtbaren Bereich der Seitenhöhe größer oder gleich der Breite
- Landschaft: Landschaft der Wert unter Portrait Umstände
Beispiele
Wenn die vertikale Bildschirm-Hintergrund wird hellblau:
body {
background-color: hellblau;
}
}
Versuchen »