Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/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. PC
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
Artikel empfehlen
So installieren Sie Git unter Linux
1. Einleitung Git ist ein kostenloses, verteiltes...
Detailliertes Tutorial zum Anpassen des Installationspfads der MySQL-Version 5.7.18 (Installation von Binärpaketen)
Installationspfad: /application/mysql-5.7.18 1. V...
Vergleich von CSS-Schatteneffekten: Schlagschatten und Box-Schatten
Drop-Shadow und Box-Shadow sind beide CSS-Eigensc...
Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis
In diesem Artikelbeispiel erfahren Sie den spezif...
Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)
Frage Als ich heute eine Projektfunktion schrieb,...
Detaillierte Erläuterung der MySQL-Fremdschlüsseleinschränkungen
Amtliche Dokumentation: https://dev.mysql.com/doc...
Docker-Bereitstellung – Analyse des Implementierungsprozesses für RabbitMQ-Container
1. Ziehen Sie das Bild Führen Sie zunächst den fo...
Tipps zur Verwendung des Top-Befehls in Linux
Lassen Sie mich zunächst die Bedeutung einiger Fe...
So erhalten Sie USB-Scannerdaten mit js
In diesem Artikel wird der spezifische Prozess zu...
JS Asynchronous Stack Tracing: Warum „await“ besser ist als „Promise“
Überblick Der grundlegende Unterschied zwischen a...
Was bei der Migration von MySQL auf 8.0 zu beachten ist (Zusammenfassung)
Passwortmodus PDO::__construct(): Der Server hat ...
Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)
Inhaltsverzeichnis 1. Requisiten Übergeordnetes E...
Eine vollständige Liste häufig verwendeter HTML-Tags und ihrer Eigenschaften
Zunächst müssen Sie einige Eigenschaften von HTML...
Detaillierte Schritte zum Hinzufügen von Hosts, die Sie in Zabbix überwachen müssen
Überwachungshost hinzufügen Host 192.168.179.104 ...
Prometheus überwacht MySQL mithilfe der Grafana-Anzeige
Inhaltsverzeichnis Prometheus überwacht MySQL übe...