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

MySQL Workbench herunterladen und verwenden Tutorial detaillierte Erklärung

Lösen Sie das Problem „Willkommen bei nginx auf Fedora!“. Nach der Installation von nginx auf Centos7 befindet sich im Verzeichnis conf.d keine Datei default.conf.

Artikel

So implementieren Sie ein responsives Layout mit CSS

MySQL Workbench herunterladen und verwenden Tutorial detaillierte Erklärung

Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse

Detailliertes Tutorial zum Herunterladen, Installieren und Konfigurieren der neuesten Version von MySQL 8.0.21

Perfekte Lösung für das Problem, dass MySQL keine Verbindung zur Datenbank über localhost herstellen kann

Detaillierte Erklärung der CSS-Stylesheets und des Formatlayouts

MySQL-Serie Multi-Table Join Abfrage 92 und 99 Syntaxbeispiele ausführliches Tutorial

So verwenden Sie den Linux-Befehl „more“ in allgemeinen Linux-Befehlen

So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen

Einführung in TypeScript-Schnittstellen

Lösen Sie das Problem „Willkommen bei nginx auf Fedora!“. Nach der Installation von nginx auf Centos7 befindet sich im Verzeichnis conf.d keine Datei default.conf.

Artikel empfehlen

Linux löst das Problem, dass Deepin den Google Chrome-Browser nicht als Root-Benutzer starten kann

30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln

Lösen Sie das Problem, dass Sie sich bei der Installation von MySQL auf einem Mac mit Homebrew nicht anmelden können

Docker generiert Bilder über Container und übermittelt DockerCommit im Detail

JavaScript implementiert den Front-End-Countdown-Effekt

js implementiert das klassische Minesweeper-Spiel

Countdown-Effekt mit Javascript implementieren

Analyse der MySQL-Methode zur Implementierung des Fuzzy-String-Ersatzes basierend auf regulären Ausdrücken

Analysieren Sie die Kompilierung und das Brennen des Linux-Kernels und des Gerätebaums

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

Erweiterte Closures in JavaScript erklärt

MySQL-Einstellungen zum Ändern des Root-Passworts, MySQL-Serververbindung, Diagramm allgemeiner MySQL-Befehle

So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck

Erste Schritte Tutorial für Anfänger⑧: Einfaches Erstellen einer Artikel-Site

Vollständige MySQL-Lernhinweise