Detaillierte Erläuterung der Prinzippraxis des Bootstrap-Frameworks für CSS3-Medienabfragen mit responsivem Layout (empfohlen)

Detaillierte Erläuterung der Prinzippraxis des Bootstrap-Frameworks für CSS3-Medienabfragen mit responsivem Layout (empfohlen)

Detaillierte Beschreibung der Verwendung des Mediengerätetyps:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <!-- Bildschirmgerät -->
    <style media="Bildschirm">
        h1{
            Farbe: rot;
        }
    </Stil>

    <!-- Druckergerät -->
    <style media="drucken">
        h1{
            Farbe: grün;
        }
    </Stil>

    <!-- Bildschirmgeräte und Druckergeräte -->
    <style media="Bildschirm,Druck">
        h1{
            Schriftstärke: normal;
        }
    </Stil>
</Kopf>
<Text>
  <h1>Tschüs</h1>
</body>
</html>

Verwenden Sie das Link-Tag, um den Medientyp festzulegen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <!-- Das Standardmedium ist „alle“, alle Geräte -->
    <link rel="stylesheet" href="css/commob.css" media="alle">
    <link rel="stylesheet" href="css/screen.css" media="screen">
    <link rel="stylesheet" href="css/print.css" media="drucken">
</Kopf>
<Text>
  <h1>Tschüs</h1>
</body>
</html>

Verwenden Sie @import, um Seitenverweise auf mehrere Dateien zu vereinfachen:

Dies ist das empfohlene Vorgehen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <link rel="stylesheet" href="css/style.css">
</Kopf>
<Text>
  <h1>Tschüs</h1>
</body>
</html>

Stil.css

@import url(common.css);
@import url(screen.css) Bildschirm;
@import url(print.css) drucken;

Verwenden Sie @media-Partials in Ihrem Stylesheet, um Antworten auf Abfragen zu definieren:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <link rel="stylesheet" href="css/style.css">
</Kopf>
<Text>
  <div Klasse="Navigationsleiste">
      <a href="">cyy</a>
      <ul>
          <li>cyy1</li>
          <li>cyy2</li>
          <li>cyy3</li>
      </ul>
  </div>
</body>
</html>

Verwandte weniger

.navbar{
  Höhe: 60px;
  Breite: 900px;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Hintergrund: #f3f3f3;
  Rand: 0 automatisch;

  ul{
    Listenstil: keiner;
    Anzeige: Flex;
  }
}

@media screen und (max-width:600px) {
  .navbar{
    ul{
      Anzeige: keine;
    }
  }
}

und bedingte Urteilsreaktionsanwendung:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <style media="screen und (min-width:768px) und (max-width:1000px)">
        h1{
            Farbe: rot;
        }
    </Stil>

<style media="Bildschirm und (max-width:768px)">
    h1{
        Farbe: blau;
    }
</Stil>
</Kopf>
<Text>
  <h1>CYY</h1>
</body>
</html>

Logisch oder mit Tricks zu bedienen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <!-- Wenn das Gerät im Querformat ist oder die Gerätebreite größer als 768 Pixel ist, unabhängig davon, ob es im Hoch- oder Querformat ist -->
    <style media="Bildschirm und (Ausrichtung: Querformat),Bildschirm und (Mindestbreite: 768px)">
        h1{
            Farbe: rot;
        }
    </Stil>

</Kopf>
<Text>
  <h1>CYY</h1>
</body>
</html>

Bei der Verwendung des Schlüsselworts „not“ sind folgende Punkte zu beachten:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    
    <Stil>
        /* Wenn die Bedingung erfüllt ist, wird der Stil nicht angewendet */
        @media nicht Bildschirm und (min-width:500px) und (max-width:768px) {
            h1{
                Farbe: rot;
            }
        }
    </Stil>

</Kopf>
<Text>
  <h1>CYY</h1>
</body>
</html>

Nur verwenden, um Low-End-Browser auszuschließen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    
    <Stil>
        /* Nach dem Hinzufügen wird diese Syntax von einfachen Browsern ignoriert*/
        @media nur Bildschirm und (min-width:500px) {
            h1{
                Farbe: rot;
            }
        }
    </Stil>

</Kopf>
<Text>
  <h1>CYY</h1>
</body>
</html>

Dateistruktur des tatsächlichen Fallvorgangs:

html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <meta name="viewport" content="width=Gerätebreite,Minimalmaßstab=1.0,Maximalmaßstab=1.0,Benutzerskalierbar=nein">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <link rel="stylesheet" href="css/style.css">

</Kopf>
<Text>
  <header Klasse="mb-2">
      <div Klasse="Container">
        <div Klasse="Navigationsleiste">
            <a href="" class="logo">CYY</a>
            <label für="toggle-nav"><i class="fa fa-tasks" aria-hidden="true"></i></label>
            <Eingabetyp="Kontrollkästchen" Name="" ID="Navigation umschalten">
            <div Klasse="collapse">
                <ul class="links">
                    <li><a href="">Systemlernen</a></li>
                    <li><a href="">Praktische Kurse</a></li>
                    <li><a href="">Themendiskussion</a></li>
                    <li><a href="">Anmelden und Karte stempeln</a></li>
                </ul>
                <div Klasse="Formular">
                    <a href="">Anmelden</a>
                    <a href="" class="form-bg">Registrieren</a>
                </div>
            </div>
        </div>
      </div>
  </header>

  
  <div Klasse="Container">
    <div Klasse="Zeile">
        <div Klasse="col-6 col-lg-9 col-xs-12">
            <div Klasse="Karte">
                <div Klasse="Kartenkopfzeile">
                    <h2>Neueste Updates</h2>
                </div>
                <div Klasse="Kartenkörper">
                    <ul Klasse="Listengruppe">
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                        <li>
                            <a href="">cyy hat angefangen, responsives Layout zu lernen</a>
                            <span>13.11.2020</span>
                        </li>
                    </ul>
                </div>
                <div Klasse="Kartenfußzeile">
                    <div Klasse="Seite">
                        <a href=""><</a>
                        <a href="">1</a>
                        <a href="">2</a>
                        <a href="" Klasse="aktuell">3</a>
                        <a href="">4</a>
                        <a href="">5</a>
                        <a href="">></a>
                    </div>
                </div>
            </div>
        </div>
        <div Klasse="col-6 col-lg-3 col-xs-12">
            <div Klasse="Karte">
                <div Klasse="Kartenkopfzeile">
                    <h3>Community-Beiträge</h3>
                </div>
                <div Klasse = "Kartenkörper""></div>
                <div Klasse = "Kartenfußzeile" </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Einführung einer einheitlichen Steuerung style.css

@import url(common.css);
@import url(navbar.css);
@import url(karte.css);
@import url(titel.css);
@import url(seite.css);
@import url(margin.css);
@import url(Listengruppe.css);
@import url(small-x.css) nur Bildschirm und (max-width:768px);
@import url(small.css) nur Bildschirm und (min-width:768px);
@import url(medium.css) nur Bildschirm und (min-width:960px);
@import url(big.css) nur Bildschirm und (min-width:1200px);

Navigationskomponente navbar.less

Überschrift{
  Rahmen unten: 5px durchgezogen #009688;
  Boxschatten: 0 5px 5px rgba (0,0,0,.2);

  .navbar{
    Anzeige: Flex;
    Polsterung: 1rem 0;
    Elemente ausrichten: zentrieren;

    .Logo{
      Farbe: #009688;
      Rand rechts: 20px;
      Schriftstärke: fett;
      Schriftgröße: 1,3rem;

      &+Beschriftung{
        Anzeige: keine;

        &+Eingabe{
          Anzeige: keine;
        }

      }
    }

    .Zusammenbruch{
      Anzeige: Flex;
      Flex-Wachstum: 1;

      .links{
        Anzeige: Flex;
        // Den verbleibenden Raum ausfüllen margin-right:auto;

        li{
          Rand: 0 10px;

          A{
            Farbe: #777;
            
  
            &:schweben{
              Farbe: Nr. 333;
              Schriftstärke: fett;
            }
          }
        }
        
      }

      .bilden{
        A{
          Rand: 1px durchgezogen #009688;
          Farbe: #009688;
          Polsterung: .3rem 1rem;
          Rahmenradius: .3rem;

          &.form-bg{
            Hintergrund: #009688;
            Farbe: weiß;
          }
        }
      }
    }
  }
}

@media screen und (max-width:960px) {
  Überschrift{
    .navbar{
      // Die Flex-Flow-Eigenschaft ist eine zusammengesetzte Eigenschaft der Flex-Direction- und Flex-Wrap-Eigenschaften.
      Flex-Flow: Zeilenumbruch;

      .Logo{
        Rand rechts: automatisch;

        &+Beschriftung{
          Anzeige:Block;
          Rand: 1px durchgezogen #ddd;
          Polsterung: .5rem 1rem;
          Farbe: Nr. 555;
          Cursor:Zeiger;

          &+Eingabe{
            Anzeige: keine;
          }

          &+Eingabe:geprüft{
            &+.collapse{
              Anzeige:Block;
            }
          }
        }
      }
      .Zusammenbruch{
        Anzeige: keine;
        Flex-Flow:Spalte;
        Breite: 100 %;

        .links{
          Flex-Richtung:Spalte;
          Rand unten: 1,5rem;

          li{
            Rand: .5rem 0;
          }
        }
      }
    }
  }
}

Kartenkomponente card.less

.Karte{
  Rand: 1px durchgezogen #ddd;
  Kastenschatten: 0 0 5px rgba (0,0,0,.1);
  Randradius: .2rem;

  .Kartenheader{
    Polsterung: .5rem 1rem;
    Rahmen unten: 1px durchgezogen #ddd;
  }
  .Kartenkörper{
    Polsterung: 1rem;
  }
  .Kartenfußzeile{
    Polsterung: .5rem 1rem;
    Rahmen oben: 1px durchgezogen #ddd;
  }
}

Textkomponente title.less

h2 {
  Schriftgröße: 1rem;
}
h3 {
  Schriftgröße: 0,8rem;
}
h2,
h3,
h4 {
  Farbe: #555;
}

Paginierungskomponente page.less

.Seite{
  Anzeige: Flex;

  A{
    Anzeige:Block;
    Polsterung: .3rem .8rem;
    Rand: 1px durchgezogen #ddd;
    // Lassen Sie die beiden überlappenden Rahmenlinien überlappen margin-left:-1px;
    Farbe: Nr. 555;

    &:erstes-Kind{
      Rahmen oben links – Radius: .3rem;
      Rahmen unten links – Radius: .3rem;
    }

    &:letztes-Kind{
      Rahmen oben rechts – Radius: .3rem;
      Rahmen unten rechts, Radius: .3rem;
    }

    &.aktuell{
      Hintergrund: #009688;
      Farbe: weiß;
      Rand: 1px durchgezogen #009688;
    }
  }
}

Randkomponente margin.less

.mb-1 {
  Rand unten: 1rem;
}
.mb-2 {
  Rand unten: 2rem;
}
.mb-3 {
  Rand unten: 3rem;
}

Listenkomponente list-group.less

.Listengruppe{
  li{
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Polsterung: .8rem 0;
    Rahmen unten: 1px durchgezogen #ddd;
    Schriftgröße: .9rem;

    &:letztes-Kind{
      Rahmen unten: keiner;
    }

    A{
      Farbe: #777;
    }

    Spanne{
      Farbe: #888;
      Schriftgröße: .6rem;
    }
  }
}

Small-x.less für ultrakleine Bildschirme

Körper {
  Hintergrund: weiß;
}
.container {
  Breite: 95 %;
  Rand: 0 automatisch;
}
.col-xs-12 {
  Gitterspalte: Spanne 12;
}
.col-xs-11 {
  Gitterspalte: Spanne 11;
}
.col-xs-10 {
  Gitterspalte: Spanne 10;
}
.col-xs-9 {
  Gitterspalte: Spanne 9;
}
.col-xs-8 {
  Gitterspalte: Spanne 8;
}
.col-xs-7 {
  Gitterspalte: Spanne 7;
}
.col-xs-6 {
  Gitterspalte: Spanne 6;
}
.col-xs-5 {
  Gitterspalte: Spanne 5;
}
.col-xs-4 {
  Gitterspalte: Spanne 4;
}
.col-xs-3 {
  Gitterspalte: Spanne 3;
}
.col-xs-2 {
  Gitterspalte: Spanne 2;
}
.col-xs-1 {
  Gitterspalte: Spanne 1;
}

Anpassung an kleine Bildschirme small.less

Körper{
  Hintergrund: weiß;
}
.Container{
  Breite: 750px;
  Rand: 0 automatisch;

}
.col-sm-12{
  Rasterspalte: Spanne 12;
}
.col-sm-11{
  Rasterspalte: Spanne 11;
}
.col-sm-10{
  Rasterspalte: Spanne 10;
}
.col-sm-9{
  Rasterspalte: Spanne 9;
}
.col-sm-8{
  Rasterspalte: Spanne 8;
}
.col-sm-7{
  Rasterspalte: Spanne 7;
}

.col-sm-6{
  Rasterspalte: Spanne 6;
}
.col-sm-5{
  Rasterspalte: Spanne 5;
}
.col-sm-4{
  Rasterspalte: Spanne 4;
}
.col-sm-3{
  Rasterspalte: Spanne 3;
}
.col-sm-2{
  Rasterspalte: Spanne 2;
}
.col-sm-1{
  Rasterspalte: Spanne 1;
}

Mittlere Bildschirmanpassung medium.less

Körper{
  Hintergrund: weiß;
}
.Container{
  Breite: 950px;
  Rand: 0 automatisch;

}
.col-md-12{
  Rasterspalte: Spanne 12;
}
.col-md-11{
  Rasterspalte: Spanne 11;
}
.col-md-10{
  Rasterspalte: Spanne 10;
}
.col-md-9{
  Rasterspalte: Spanne 9;
}
.col-md-8{
  Rasterspalte: Spanne 8;
}
.col-md-7{
  Rasterspalte: Spanne 7;
}

.col-md-6{
  Rasterspalte: Spanne 6;
}
.col-md-5{
  Rasterspalte: Spanne 5;
}
.col-md-4{
  Rasterspalte: Spanne 4;
}
.col-md-3{
  Rasterspalte: Spanne 3;
}
.col-md-2{
  Rasterspalte: Spanne 2;
}
.col-md-1{
  Rasterspalte: Spanne 1;
}

Big.less für große Bildschirme

Körper{
  Hintergrund: transparent;
}
.Container{
  Breite: 1180px;
  Rand: 0 automatisch;

}
.col-lg-12{
  Rasterspalte: Spanne 12;
}
.col-lg-11{
  Rasterspalte: Spanne 11;
}
.col-lg-10{
  Rasterspalte: Spanne 10;
}
.col-lg-9{
  Rasterspalte: Spanne 9;
}
.col-lg-8{
  Rasterspalte: Spanne 8;
}
.col-lg-7{
  Rasterspalte: Spanne 7;
}

.col-lg-6{
  Rasterspalte: Spanne 6;
}
.col-lg-5{
  Rasterspalte: Spanne 5;
}
.col-lg-4{
  Rasterspalte: Spanne 4;
}
.col-lg-3{
  Rasterspalte: Spanne 3;
}
.col-lg-2{
  Rasterspalte: Spanne 2;
}
.col-lg-1{
  Rasterspalte: Spanne 1;
}

Rendern

Verwenden Sie REM-Einheiten, um die Größenreaktion zu manipulieren

Es wird empfohlen, ein Plugin für automatisierte Build-Tools zu verwenden.

Damit ist dieser Artikel mit der detaillierten Erläuterung der Prinzipien und Praktiken des CSS3-Media-Query-Responsive-Layout-Bootstrap-Frameworks abgeschlossen. Weitere relevante Inhalte zum CSS-Responsive-Layout-Bootstrap-Framework finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Fallanalyse mehrerer MySQL-Aktualisierungsvorgänge

>>:  Erklärung und Beispielverwendung von 4 benutzerdefinierten Anweisungen in Vue

Artikel empfehlen

So verwenden Sie Übersetzung und Übergang in CSS3

Ich habe immer das Gefühl, dass Übersetzen und Üb...

Detaillierte Beschreibung des MySQL-Ersetzens in der Verwendung

Die Ersetzungsanweisung ähnelt im Allgemeinen der...

uniapp implementiert Datums- und Zeitauswahl

In diesem Artikelbeispiel wird der spezifische Co...

Mysql-Methode zum Kopieren einer Datenspalte einer Tabelle in eine Spalte einer anderen Tabelle

mysql kopiert eine Tabellenspalte in eine andere ...

Einfaches Tutorial zu den Firewall-Einstellungen unter Ubuntu 20.04 (Anfänger)

Vorwort In der heutigen, immer bequemeren Interne...

Lösung für das Problem, dass Docker-Container nicht gestoppt oder beendet werden können

Docker-Version 1.13.1 Problemprozess Ein MySQL-Co...

Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React

Im Vergleich zum alten Lebenszyklus Drei Hooks we...

Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen

Inhaltsverzeichnis render.js-Teil create-context....

18 Tipps zur Konfiguration des Nginx-Proxy-Cache, die Betreiber kennen müssen (welche kennen Sie?)

Wir alle wissen, dass die Leistung von Anwendunge...

So verwenden Sie async und await richtig in JS-Schleifen

Inhaltsverzeichnis Übersicht (Loop-Modus – Allgem...

Mounten Sie die Festplatte in einem Verzeichnis unter Ubuntu 18.04

Einführung In diesem Artikel wird beschrieben, wi...

Detaillierte Erläuterung der Verwendung des Nginx-Reverse-Proxys zur Lösung domänenübergreifender Probleme

Frage Im vorherigen Artikel zur domänenübergreife...

Detaillierte Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung

1. Aktivieren Sie den Remotezugriff auf den Docke...

Einführung und Verwendung von fünf Controllern in K8S

Inhaltsverzeichnis Controllertyp von k8s Beziehun...

Tastenkombinationsvorgang für SQL Server-Kommentare

Batchkommentare in SQL Server Batch-Annotation St...