So implementieren Sie ein responsives Layout mit CSS
|
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
Artikel empfehlen
VMware virtuelle Maschine installieren CentOS 8 (1905) System-Tutorial-Diagramm
Die weltberühmte virtuelle Maschinensoftware VMwa...
Detaillierte Erläuterung der Leistungsoptimierung des Web-Frontends: Zusammenführung und Komprimierung von Ressourcen
Ressourcenzusammenführung und -komprimierung für ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.15 unter Windows 8
MySQL ist eine Datenbank, die mir sehr gefällt. H...
So fügen Sie Docker dynamisch Ports hinzu, ohne das Image neu zu erstellen
Manchmal müssen Sie während des Betriebs freigege...
htm-Anfängerhinweise (unbedingt für Anfänger lesen)
1. Was ist HTML HTML (HyperText Markup Language):...
MYSQL METADATA LOCK (MDL LOCK) MDL-Sperrproblemanalyse
1. Einleitung MDL-Sperren in MySQL haben schon im...
Detaillierte Erläuterung des Prozesses zum Abfragen von Benutzerberechtigungen mithilfe von MySQL-Anweisungen
Wie können Sie in MySQL die Berechtigungen anzeig...
Detaillierte Erklärung zum effizienten Importieren mehrerer SQL-Dateien in MySQL
MySQL bietet mehrere Möglichkeiten, mehrere SQL-D...
VMware15/16 Detaillierte Schritte zum Entsperren von VMware und Installieren von MacOS
VMware-Version: VMware-Workstation-Full-16 VMware...
Vue hält den Benutzer angemeldet (verschiedene Token-Speichermethoden)
Inhaltsverzeichnis So setzen Sie Cookies Nachteil...
Detaillierte Erklärung zweier Methoden zur Behebung eines Fehlers in der Justify-Content-Space-Between-Ausrichtung des Flex-Layouts
Wenn Sie „display:flex, justify-content: space-be...
MySQL 8.0.15 Installations- und Konfigurations-Tutorial unter Win10
Was ich kürzlich gelernt habe, beinhaltet Kenntni...
React-Prinzipien erklärt
Inhaltsverzeichnis 1. setState() Beschreibung 1.1...
Nginx kompiliert nginx - neues Modul hinzufügen
1. Vorhandene Module anzeigen /usr/local/nginx/sb...
Zusammenfassung der Projektentwicklungspraxis in Kombination mit Vue3 von TypeScript
Inhaltsverzeichnis Überblick 1. Kompositions-API ...