So implementieren Sie ein responsives Layout mit CSS

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.

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

Artikel empfehlen

JavaScript-Countdown zum Schließen von Anzeigen

Verwenden von Javascript zum Implementieren eines...

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

1. Fügen Sie dem HTML-Header das Viewport-Tag hin...

Code zur Implementierung eines einfachen Pfeilsymbols mit Div+CSS in HTML

Beim Webdesign verwenden wir Pfeile oft als Dekor...

Tutorial zur Installation von MySQL 5.7.18 unter Windows 10

In diesem Tutorial erfahren Sie alles über die In...

Verwenden Sie vue2+elementui für Hover-Prompts

Die Hover-Prompts von Vue2+elementui sind in exte...

Verwendung des Linux-Befehls gzip

1. Befehlseinführung Der Befehl gzip (GNU zip) wi...

Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts

Inhaltsverzeichnis 1. Offizielle Dokumentation 2....

MySQL Installer 8.0.21 Installations-Tutorial mit Bildern und Text

1. Grund Ich musste MySQL nur auf einem neuen Sys...

UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout

Als ich vor ein paar Tagen ein dreispaltiges Layou...

Zwei Implementierungen des Front-End-Routings von Vue-Router

Inhaltsverzeichnis Modusparameter HashHistorie Ha...

MySQL-Methode und Beispiel für langsame Abfragen

1. Einleitung Durch Aktivieren des Slow Query Log...