Implementieren eines responsiven Layouts mit CSS Responsive Layout scheint sehr anspruchsvoll und schwierig zu sein, aber tatsächlich kann responsives Layout nur mit CSS erreicht werden Sie müssen die unverbundene Abfrage in CSS verwenden. So verwenden Sie sie: Drei Möglichkeiten zur Nutzung von @media 1. Direkt in der CSS-Datei verwenden: @mediatyp und (Bedingung 1) und (Bedingung 2) { CSS-Stil} @media screen und (max-width:1024px) { Körper{ Hintergrundfarbe: rot; } } 2. Importieren mit @import @import url("css/moxie.css") alle und (max-width:980px); 3. Dies ist auch die am häufigsten verwendete Methode: Verwenden Sie direkt die Linkverbindung und legen Sie die Abfragemethode über das Medienattribut fest <link rel="stylesheet" type="text/css" href="css/moxie.css" media="alle und (max-width=980px)"/> Nachfolgend sehen Sie einen einfachen HTML-Code für responsives Layout: <!doctype html> <html> <Kopf> <meta charset="utf-8"/> <Titel>Reaktionsfähig</Titel> <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type="text/css" href="index01.css" media="screen und (max-width:1024px) und (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="Bildschirm und (max-width:720px)"/> </Kopf> <Text> <div class="header">Kopfzeile</div> <div Klasse="Haupt-Clearfix"> <div class="left">Links</div> <div class="center">Mitte</div> <div class="right">Rechts</div> </div> <div class="footer">Unten</div> </body> </html> Hier sind die CSS-Stile: *{ Rand: 0; Polsterung: 0; Textausrichtung: zentriert; Farbe: gelb; } .header{ Breite: 100 %; Höhe: 100px; Hintergrund:#ccc; Zeilenhöhe: 100px; } .hauptsächlich{ Hintergrund: grün; Breite: 100 %; } .clearfix:nach{ Anzeige:Block; Höhe: 0; Inhalt:""; Sichtbarkeit: versteckt; klar: beides; } .links,.Mitte,.rechts{ schweben: links; } .links{ Breite: 20 %; Hintergrund: #112993; Höhe: 300px; Schriftgröße: 50px; Zeilenhöhe: 300px; } .Center{ Breite: 60 %; Hintergrund:#ff0; Höhe: 400px; Farbe: #fff; Schriftgröße: 50px; Zeilenhöhe: 400px; } .Rechts{ Breite: 20 %; Hintergrund:#f0f; Höhe: 300px; Schriftgröße: 50px; Zeilenhöhe: 300px; } .Fußzeile{ Breite: 100 %; Höhe: 50px; Hintergrund: #000; Zeilenhöhe: 50px; } <link rel="stylesheet" type="text/css" href="index01.css" media="screen und (max-width:1024px) und (min-width:720px)"/>Stilcode .Rechts{ Schwimmer: keine; Breite: 100 %; Hintergrund:#f0f; klar: beides; } .links{ Breite: 30 %; } .Center{ Breite: 70 %; } .hauptsächlich{ Höhe: 800px; } <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>Stilcode .links,.Mitte,.rechts{ Schwimmer: keine; Breite: 100 %; } Wenn das Fenster größer als 1024 Pixel ist, wird der Befehl komprimiert und es treten keine weiteren Änderungen auf: Wenn das Fenster kleiner als 1024 Pixel und größer als 720 Pixel ist, schwebt die rechte Leiste nicht mehr und zeigt Folgendes an: Wenn das Fenster kleiner als 720 Pixel ist, sind die linke, mittlere und rechte Spalte alle nicht schwebend und haben eine Breite von 100 %: Okay, so einfach ist das Layout, und das Erfassen der Details erfordert dennoch ständige Übung. Kontinuierliche Aktualisierung, willkommen jedermanns Rat Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
>>: W3C Tutorial (3): W3C HTML Aktivitäten
Vor dem Verstecken: Nach dem Verstecken: CSS: Code...
Verwenden von Javascript zum Implementieren eines...
1. Fügen Sie dem HTML-Header das Viewport-Tag hin...
Die Grundlagen der MySQL-Wissenspunkte für die Co...
Beim Webdesign verwenden wir Pfeile oft als Dekor...
In diesem Tutorial erfahren Sie alles über die In...
Die Hover-Prompts von Vue2+elementui sind in exte...
1. Befehlseinführung Der Befehl gzip (GNU zip) wi...
Inhaltsverzeichnis 1. Offizielle Dokumentation 2....
1. Grund Ich musste MySQL nur auf einem neuen Sys...
Als ich vor ein paar Tagen ein dreispaltiges Layou...
Inhaltsverzeichnis Modusparameter HashHistorie Ha...
1. Einleitung Durch Aktivieren des Slow Query Log...
1. Tabellen erstellen <br /> Erstellen Sie ...
YSlow ist ein von Yahoo USA entwickeltes Plug-in ...