Telefongeräte

Vorwort

Heutzutage gibt es viele Geräte, darunter PC, iPad, Mobiltelefon, Smartwatch und Smart-TV. Wenn es kein responsives Layout gibt, wird die Computer-Webseite auf einem Mobiltelefon oder iPad angezeigt, das Erlebnis ist sehr schlecht, die Bedienung ist umständlich und es kommt zu visueller Ermüdung. Daher müssen wir bei der Entwicklung von Webseiten ein responsives Layout haben.

Index

<!DOCTYPE html>
<html>
<Kopf>
    <title>Responsives Layout</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</Kopf>
<Text>
    <div id="Inhalt">
        <div id="header">Kopfzeile</div>
        <div id="left">Linke Seite</div>
        <div id="center">Mitte</div>
        <div id="right">Rechte Seite</div>
        <div id="footer">Unten</div>
    </div>
</body>
</html>

CSS

*{
    Rand: 0;
    Polsterung: 0;
}

/*An PC-Breite größer als 1000 Pixel anpassen*/
@media screen und (min-width: 1000px) {
    #Inhalt{
        Breite: 960px;
        Rand: 0 automatisch;
    }

    #header{
        Breite: 100 %;
        Zeilenhöhe: 100px;
        schweben: links;
        Hintergrund: #333;
        Farbe: #fff;
        Textausrichtung: zentriert;
        Schriftgröße: 30px;
        Rand unten: 10px;
    }

    #links{
        Breite: 200px;
        Zeilenhöhe: 400px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
        Rand rechts: 10px;
    }

    #Center{
        Breite: 540px;
        Zeilenhöhe: 400px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
    }

    #Rechts{
        Breite: 200px;
        Zeilenhöhe: 400px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: rechts;
        Schriftgröße: 30px;
        Farbe: #fff;
    }

    #Fußzeile{
        Breite: 960px;
        Höhe: 200px;
        Hintergrund: #333;
        Farbe: #fff;
        Zeilenhöhe: 200px;
        Schriftgröße: 30px;
        Textausrichtung: zentriert;
        schweben: links;
        Rand oben: 10px;
    }
}


/*An Padbreite zwischen 640-1000 anpassen*/
@media screen und (min-width: 640px) und (max-width: 1000px) {
    #Inhalt{
        Breite: 600px;
        Rand: 0 automatisch;
    }

    #header{
        Breite: 100 %;
        Zeilenhöhe: 100px;
        schweben: links;
        Hintergrund: #333;
        Farbe: #fff;
        Textausrichtung: zentriert;
        Schriftgröße: 30px;
        Rand unten: 10px;
    }

    #links{
        Breite: 200px;
        Zeilenhöhe: 400px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
        Rand rechts: 10px;
    }

    #Center{
        Breite: 390px;
        Zeilenhöhe: 400px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
    }

    #Rechts{
        Breite: 600px;
        Zeilenhöhe: 300px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
        Rand oben: 10px;
    }

    #Fußzeile{
        Breite: 600px;
        Höhe: 200px;
        Hintergrund: #333;
        Farbe: #fff;
        Zeilenhöhe: 200px;
        Schriftgröße: 30px;
        Textausrichtung: zentriert;
        schweben: links;
        Rand oben: 10px;
    }
}


/*Anpassung an eine Breite von weniger als 640 für mobile Endgeräte*/
@media screen und (max-width: 639px) {
    #Inhalt{
        Breite: 400px;
        Rand: 0 automatisch;
    }

    #header{
        Breite: 100 %;
        Zeilenhöhe: 100px;
        schweben: links;
        Hintergrund: #333;
        Farbe: #fff;
        Textausrichtung: zentriert;
        Schriftgröße: 30px;
        Rand unten: 10px;
    }

    #links{
        Breite: 100 %;
        Zeilenhöhe: 150px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
        Rand unten: 10px;
    }

    #Center{
        Breite: 100 %;
        Zeilenhöhe: 300px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
    }

    #Rechts{
        Breite: 100 %;
        Zeilenhöhe: 150px;
        Textausrichtung: zentriert;
        Hintergrund: #333;
        schweben: links;
        Schriftgröße: 30px;
        Farbe: #fff;
        Rand oben: 10px;
    }

    #Fußzeile{
        Breite: 100 %;
        Höhe: 200px;
        Hintergrund: #333;
        Farbe: #fff;
        Zeilenhöhe: 200px;
        Schriftgröße: 30px;
        Textausrichtung: zentriert;
        schweben: links;
        Rand oben: 10px;
    }
}

Verwenden Sie @media screen und (eingeschränkter Umfang), um beispielsweise das Layout der Webseite zu steuern

„min-width“ stellt die Mindestgrenze dar und „max-width“ stellt die Höchstgrenze dar.

Pad-Ende

Telefon

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.

<<: WeChat-Miniprogramme implementieren Sternebewertung

>>: Auswahl der Groß-/Kleinschreibung von MySQL-Tabellennamen

Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten

Das Shellskript zählt regelmäßig den PV von access.log unter Nginx und sendet ihn an die API und speichert ihn in der Datenbank

Artikel

Beispielcode für die Javascript-Operation „Alles auswählen/Alles abwählen“ in HTML

Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte

Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten

Tutorial zum Herunterladen und Installieren von XFTP (grafisches Tutorial)

MySql Group By implementiert die Gruppierung mehrerer Felder

Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset

MySQL-Paging-Abfragemethode für Millionen von Datenmengen und ihre Optimierungsvorschläge

Das Shellskript zählt regelmäßig den PV von access.log unter Nginx und sendet ihn an die API und speichert ihn in der Datenbank

Beispielcode für die Javascript-Operation „Alles auswählen/Alles abwählen“ in HTML

Verwenden von js zum Implementieren eines einfachen Lichtschaltercodes

Alibaba Cloud Centos7 Installation und Konfiguration von SVN

Detaillierte Erläuterung der drei Möglichkeiten zum Schneiden von Catalina.out-Protokollen in Tomcat

Artikel empfehlen

Datenbankabfrage, welches Objekt welches Feld enthält, Methodenanweisung

Absatzlayout und Zeilenumbrüche in HTML-Webseiten

So verwenden Sie Filter zur Implementierung der Überwachung in Zabbix

Sechs Möglichkeiten zur Steigerung der Geschwindigkeit Ihrer Website

Ein unvollständiger Leitfaden zur JavaScript-Toolchain

Diskussion über Web-Nachahmung und Plagiat

Detaillierte Erklärung der Meta-Tags und ihrer Verwendung in HTML

CSS-Code zum Erstellen von 10 modernen Layouts

Mybatis Paging-Plugin pageHelper - ausführliche Erklärung und einfaches Beispiel

Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten

Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien

Installationsprozess von Zabbix-Agent auf Kylin V10

Ein nützliches mobiles Scrolling-Plugin BetterScroll

Webdesigner sollten Webseiten unter drei Aspekten optimieren

Einführung in neue ECMAscript-Objektfunktionen