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

Mysql: Der als Definierer angegebene Benutzer ('xxx@'%') existiert nicht – Lösung

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

Mysql: Der als Definierer angegebene Benutzer ('xxx@'%') existiert nicht – Lösung

Grafisches Tutorial zur Installation und Konfiguration von mysql5.7.19 winx64 (win10)

Detaillierte Erklärung der MySQL-Alter-Ignore-Syntax

Zusammenfassung des JS-Ausführungskontexts und -umfangs

Wie stelle ich Tomcat als automatisch gestarteten Dienst ein? Der schnellste Weg

So installieren und deinstallieren Sie IIS7-Komponenten mithilfe der WIN2008-Serverbefehlszeile

So verwenden Sie Verbindungen der Physik-Engine in CocosCreator

Grundlegende Anweisungen der MySQL-Datendefinitionssprache DDL

Detaillierte Erklärung der gemischten Vererbung in Vue

Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet

Artikel empfehlen

Wenden Sie „Provide“ und „Inject“ an, um die Vue-Seitenmethode zu aktualisieren

So handhaben Sie gleichzeitige Aktualisierungen von MySQL-Daten

Lösung für die Systemstörung (Booten nicht möglich), die durch das Upgrade von glibc in Centos7 verursacht wurde

HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren

So starten Sie das Quellcode-Debugging von Tomcat in Idea und rufen Tomcat zum Debuggen auf

Verstehen Sie die anfängliche Verwendung von Redux in React in einem Artikel

Eine kurze Analyse der Prinzipien von NFS-Servern und der Schritte zum Erstellen, Konfigurieren und Bereitstellen dieser

So verwenden Sie Docker zum Erstellen einer einheitlichen OpenLDAP+phpLDAPadmin-Benutzerauthentifizierung

Verlustfreie Erweiterungsmethode unter Linux

Zusammenfassung der Probleme mit der Mysql-connector-java-Treiberversion

Lösen Sie das Problem beim Einstellen des Datums auf 0000-00-00 00:00:00 in MySQL 8.0.13

Tutorial-Diagramm zur Verwendung von Jenkins für die automatisierte Bereitstellung unter Windows

Detaillierte Analyse der langsamen MySQL-Protokollöffnungsmethode und des Speicherformats

Tutorial zur Installation der DAMO-Datenbank auf Centos7