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;
}

.Rechts{
    Schwimmer: keine;
    Breite: 100 %;
    Hintergrund:#f0f;
    klar: beides;
}
.links{
    Breite: 30 %;
}
.Center{
    Breite: 70 %;
}
.hauptsächlich{
    Höhe: 800px;
}

.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.

<<: Detaillierte Erläuterung des Prozesses zur Bereitstellung von Tomcat und zur Erstellung des ersten Webprojekts in IDEA 2020.3.1

>>: W3C Tutorial (3): W3C HTML Aktivitäten

Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen

So implementieren Sie ein responsives Layout mit CSS

Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen

Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen

Beispiel für die Installation von nginx in einem angegebenen Verzeichnis

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

So ändern Sie Flash-SWF-Dateien in Webseiten

JS realisiert den automatischen Wiedergabeeffekt von Bildern

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Unbekannte Verwendung von Object.entries in JavaScript

Verwenden von Streaming-Abfragen in MySQL, um Daten-OOM zu vermeiden

Artikel empfehlen

Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses

MySQL-Datenbank erstellen, Benutzer hinzufügen, Benutzerautorisierung, praktische Methode

HTTP-Statuscodes

jQuery benutzerdefinierter Lupeneffekt

HTML-Code, der den Internet Explorer zum Einfrieren bringen kann

VMware Workstation Pro installiert das Win10-Betriebssystem in Reinform

JS implementiert ein zufälliges Namensaufrufsystem

Detaillierte Erläuterung der allgemeinen Schritte zur SQL-Anweisungsoptimierung

Vue implementiert die Drag & Drop-Funktion für Bilder

Das verteilte Überwachungssystem Zabbix verwendet SNMP- und JMX-Kanäle zum Sammeln von Daten

Benutzerdefinierte Vue-Komponenten verwenden Ereignismodifikatoren, um auf den Pit-Rekord zu treten

Detaillierte Erläuterung der MySQL-Existes- und Not-Existes-Beispiele

So verwenden Sie die Firewall-Iptables-Strategie zum Weiterleiten von Ports auf Linux-Servern

Detaillierte Analyse des binlog_format-Modus und der Konfiguration in MySQL

VMware-Installationsfehler: VMware Workstation konnte VMware Authorization Service nicht starten