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

Schritte zum Wiederherstellen einer einzelnen MySQL-Tabelle

Während ich eine Pause machte, wurde ich durch ei...

Einführung in die Installations- und Bereitstellungsschritte für SSL-Zertifikate unter Nginx

Inhaltsverzeichnis Problembeschreibung: Installat...

WeChat Mini-Programm: Position des Videofeuers zufällig

In diesem Artikel wird der spezifische Code zur z...

Lösung für das Problem, dass der Alibaba Cloud-Host nicht über IP auf die Website zugreifen kann (gelöst durch Konfigurieren von Sicherheitsgruppenregeln)

Ich habe gerade einen Alibaba Cloud-Host gekauft ...

Implementierung der automatischen Konstruktionsweiterleitung von React

Inhaltsverzeichnis Sequenz 1. Zentralisiertes Rou...

Detaillierte Erklärung zum CSS-Randkollaps

Vorherige Das ist eine klassische alte Frage. Da ...

HTML/CSS (der erste Leitfaden, den Anfänger unbedingt lesen sollten)

1. Die Bedeutung von Webstandards verstehen - War...

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Vorwort Bei der WeChat-Applet-Entwicklung (native...

Detailliertes Tutorial zum Kompilieren und Installieren von MySQL 8.0.20 aus dem Quellcode

Im vorherigen Artikel haben wir Folgendes vorgest...

Installation und Verwendung von TypeScript und grundlegende Datentypen

Der erste Schritt besteht darin, TypeScript globa...

XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML

<br />Dieser Artikel gibt Ihnen eine kurze E...

Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung

Inhaltsverzeichnis Überblick 1. Menü- und Routing...

JavaScript zum Erzielen eines Zeitbereichseffekts

In diesem Artikel wird der spezifische Code für J...

Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten

beschreiben: Wenn die Tabs-Komponente hin- und he...

So stellen Sie mit Docker ein einfaches C/C++-Programm bereit

1. Erstellen Sie zunächst eine Datei hello-world....