Was ist eine Frage der Medien?
Medien Abfrage ist eine CSS-Technik in CSS3 eingeführt.
Es nutzt die @media Regel einen Block von CSS - Eigenschaften , um nur , wenn eine bestimmte Bedingung erfüllt ist.
Beispiel
Wenn das Browserfenster kleiner als 500px ist, wird die Hintergrundfarbe hell ändern:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Versuch es selber " Fügen Sie einen Haltepunkt
Früher in diesem Tutorial haben wir eine Web-Seite mit Zeilen und Spalten, und es war ansprechbar, aber es sah nicht gut aus auf einem kleinen Bildschirm.
Medien-Anfragen können dabei helfen. Wir können einen Haltepunkt hinzufügen, wo bestimmte Teile des Designs auf jeder Seite der Bruchstelle anders verhalten wird.
Desktop-
Telefon
Verwenden Sie eine Medienabfrage einen Haltepunkt an 768px hinzuzufügen:
Beispiel
Wenn der Bildschirm (Fenster) kleiner als 768. erhält, sollte jede Spalte eine Breite von 100% aufweisen:
/* 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Versuch es selber " Design Immer für Mobile First
Mobile First Mittel für mobile Gestaltung vor für Desktop-Gestaltung oder einem anderen Gerät (Dies zeigt die Seite schneller auf kleinere Geräte zu machen).
Das bedeutet, dass wir einige Änderungen in unserem CSS machen müssen.
Statt Stile ändern , wenn die Breite kleiner als 768px bekommt, sollten wir den Entwurf zu ändern , wenn die Breite größer als 768px bekommt. Das wird unser Design Mobile First machen:
Beispiel
/* For mobile phones: */
[class*="col-"] {
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%;}
}
Versuch es selber " Ein weiterer Haltepunkt
Sie können so viele Haltepunkte hinzufügen, wie Sie möchten.
Wir werden auch einen Haltepunkt zwischen Tabletten und Mobiltelefone ein.
Desktop-
Tablette
Telefon
Wir tun dies, um eine weitere Medienabfrage Hinzufügen (bei 600px) und eine Reihe von neuen Klassen für Geräte größer als 600px (aber kleiner als 768px):
Beispiel
Man beachte , dass die beiden Gruppen von Klassen fast identisch sind, ist der einzige Unterschied der Name ( col- und col-m- ):
/* For mobile phones: */
[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%;}
} Versuch es selber " Es könnte seltsam erscheinen , dass wir zwei Sätze von identischen Klassen haben, aber es gibt uns die Möglichkeit , in HTML, zu entscheiden , was mit den Säulen an jedem Haltepunkt passieren wird:
HTML Beispiel
Für Desktop-:
Der erste und der dritte Abschnitt werden beide umspannen 3 Spalten je. Der mittlere Abschnitt 6 Spalten erstrecken.
Für Tabletten:
Der erste Abschnitt wird 3 Spalten erstrecken, wird die zweite 9 erstrecken, und der dritte Abschnitt wird unter den ersten beiden Abschnitten dargestellt werden, und es wird 12 Spalten erstrecken:
<div class="row">
<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>Orientierung: Porträt / Landschaft
Medien-Anfragen können auch das Layout einer Seite verwendet werden, von der Orientierung des Browsers abhängig zu ändern.
Sie können eine Reihe von CSS-Eigenschaften haben, die nur gelten, wenn das Browserfenster breiter als seine Höhe ist, eine so genannte "Landschaft" Orientierung:
Beispiel
Die Webseite wird ein hell Hintergrund haben, wenn die Ausrichtung im Querformat ist:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Versuch es selber "