So verwenden Sie @media in mobilen adaptiven Stilen

Allgemeiner Handy-Stil:

@media alle und (Ausrichtung: Hochformat) {
/*Vertikaler Bildschirm*/
}
@media alle und (Ausrichtung: Querformat) {
/*Horizontaler Bildschirm*/
}

Geben Sie den Höhenstil für Mobiltelefone an:

@media screen und (maximale Breite: 750px)
@media screen und (min-width: 720px) und (max-width: 960px) {//Geräte mit 720 <= xxx < 960}

Stileinstellungen für verschiedene Geräte:

@media (Mindestbreite: 768px) { //> = 768 Geräte}
@media (Mindestbreite: 992px) { //> = 992 Geräte}
@media (min-width: 1200) { //> = 1200 Geräte}

Achten Sie auf die Reihenfolge. Wenn Sie darunter @media (Mindestbreite: 768px) schreiben, ist dies eine Tragödie, da die CSS-Datei von oben nach unten gelesen wird und das letztere CSS eine höhere Priorität hat.

@media (min-width: 1200) { //> = 1200 Geräte}
@media (Mindestbreite: 992px) { //> = 992 Geräte}
@media (Mindestbreite: 768px) { //> = 768 Geräte}

Denn wenn es 1440 ist, da 1440>768, dann ist Ihre 1200 ungültig.

Wenn wir also die Mindestbreite verwenden, ist der kleinere oben und der größere unten. Wenn wir die maximale Breite verwenden, ist der größere oben und der kleinere unten.

@media (maximale Breite: 1199) { //<=1199 Geräte}
@media (maximale Breite: 991px) { //<=991 Geräte}
@media (maximale Breite: 767px) { //<=768 Geräte}

Fügen Sie ein kleines Beispiel an

<style type="text/css">
@media (maximale Breite: 768px) {
.ändern{
Höhe: 100%;
schweben: rechts;
Rand: 15px;
}
}
@media (Mindestbreite: 768px) {
.ändern{
Anzeige: keine;
}
}

Es ist ersichtlich, dass sich die Navigationsleiste oben mit der Änderung der Bildschirmgröße ändert und schließlich alle Elemente in der Navigationsleiste auf eine Schaltfläche in der oberen rechten Ecke verschoben werden.
Diese Demo ist sehr einfach, nur verwendet, um meine erste adaptive Demo aufzunehmen

Die wichtigste zu beachtende Syntax ist:

1. @media (maximale Breite: 768 px) {
CSS-Code;
}
//
„max-width limit width: 768px“ bedeutet im Wesentlichen, dass der folgende CSS-Codeblock nur ausgeführt wird, wenn die Breite dieses Steuerelements weniger als 768px beträgt, andernfalls wird der vorhandene CSS-Code ausgeführt.
„min-width Mindestbreite: 768px“ bedeutet im Wesentlichen, dass der folgende CSS-Codeblock nur ausgeführt wird, wenn die Breite dieses Steuerelements größer als 768px ist.
2.
Spalte-sm-6 Spalte-md-4 Spalte-lg-3
Stellt hauptsächlich das Bootstrap-Rastersystem dar, das unterschiedlichen Rasterverteilungen für kleine, mittlere und große Bildschirme entspricht (die horizontalen Reihen sind 2, 4, 3 und die kleinste ist 1).

Oben finden Sie alle Inhalte zur Verwendung des mobilen adaptiven Stils von @media. Ich hoffe, dass dies für alle hilfreich ist, die lernen und Probleme lösen möchten. Ich hoffe auch, dass alle 123WORDPRESS.COM unterstützen.