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

Lösung für das Problem, dass Mixin in SCSS nicht funktioniert (der Browser kann es nicht kompilieren)

Mysql implementiert die regelmäßige Bereinigung alter Daten in einer Tabelle und die Beibehaltung mehrerer Datenstücke (empfohlen)

Artikel

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

Lösung für das Problem, dass Mixin in SCSS nicht funktioniert (der Browser kann es nicht kompilieren)

Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow

CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial

Detaillierte Erklärung der Bedeutung von N und M im MySQL-Datentyp DECIMAL(N,M)

Ursachen und Lösungen für Verzögerungen bei der MySQL Master-Slave-Replikation

CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche

Untersuchen der Verwendung von Prozentwerten in der Eigenschaft „Hintergrundposition“

Idee in einem War-Paket verpackt, auf Tomcat bereitgestellt und Probleme mit dem Zugriffspfad (Abbildung und Text)

Detailliertes Tutorial zum Konfigurieren der lokalen Yum-Quelle in CentOS8

Mysql implementiert die regelmäßige Bereinigung alter Daten in einer Tabelle und die Beibehaltung mehrerer Datenstücke (empfohlen)

Artikel empfehlen

Implementierung eines einfachen Rechners auf Basis von JavaScript

So implementieren Sie Web-Stresstests mit Apache Bench

Heute werde ich einige seltene, aber nützliche JS-Techniken teilen

So legen Sie Verknüpfungssymbole in Linux fest

Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)

Lösen Sie das Problem, dass ifconfig im Docker nicht verfügbar ist

Konfiguration des SSL-Zertifikats für den Nginx-Domänennamen (Website-HTTP auf https aktualisiert)

Schritte zum Kapseln von Element-UI-Popupkomponenten

Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10

So verwenden Sie den Linux-Befehl „basename“

Beispielcode für HTML-Layered-Box-Shadow-Effekt

Anfänger lernen einige HTML-Tags (2)

Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)