Beispiel für eine adaptive CSS-Bildschirmgrößenimplementierung
|
Um eine CSS-Bildschirmgrößenanpassung zu erreichen, müssen wir zuerst die CSS3-Medienabfrage @media einführen: Mediennutzung und Regeln: ①Auf welchem Gerät wird das verlinkte Dokument angezeigt? ②Wird verwendet, um unterschiedliche Stile für unterschiedliche Medientypen festzulegen. Grammatik: @media Gerätename nur (Auswahlbedingung) nicht (Auswahlbedingung) und (Geräteauswahlbedingung), Gerät zwei {sRules} Beispiele:
/* Dies ist der CSS-Code zum Anpassen des horizontalen Bildschirmstatus*/
@media alle und (Ausrichtung: Querformat){}
/* Dies ist der CSS-Code zum Anpassen des vertikalen Bildschirmstatus*/
@media alle und (Ausrichtung: Hochformat){}
@media X und (min-width:200px){}
/*X ist der Medientyp ---> wie etwa Druck/Bildschirm/TV usw.*/
/* Wenn die Breite größer als 600 Pixel und kleiner als 960 Pixel ist, verstecke die Fußzeilenstruktur*/
@media alle und (min-height:640px) und (max-height:960px) {
Fußzeile {Anzeige: keine;}
}
In der tatsächlichen Anwendung müssen Sie zunächst den folgenden Code zur HTML-Headerdatei <head> hinzufügen: <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein"> erklären: width = Gerätebreite: Die Breite entspricht der Breite des aktuellen Gerätes initial-scale: Der anfängliche Maßstab (die Standardeinstellung ist 1,0) minimum-scale: Der Mindestmaßstab, bis zu dem der Benutzer zoomen darf (Standardeinstellung ist 1,0) maximum-scale: Der maximale Maßstab, bis zu dem der Benutzer zoomen darf (Standardeinstellung ist 1,0) user-scalable: Ob der Benutzer manuell hinein- und herauszoomen kann (die Standardeinstellung ist „nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern) Da es viele Arten von Medien gibt, finden Sie hier den entsprechenden Link zum Tutorial für Anfänger: https://www.jb51.net/css/103906.html Im Folgenden sind Medienbildschirmtypen aufgeführt (für Computerbildschirme, Tablets, Smartphones usw.): CSS-Methode zur adaptiven Bildschirmgröße:
@media screen und (min-width: 320px) und (max-width: 1156px) {
.site-bg-dl {
Position: fest;
Höhe: 100%;
Breite: 100 %;
Z-Index: 0;
Hintergrundbild: URL (bjxzfwzx/images/bj1.png);
Hintergrundgröße: Abdeckung;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: behoben;
Hintergrundgröße: 100 % 100 %;
-moz-Hintergrundgröße:100 % 100 %;
}
}erklären: Sagen Sie dem Browser, dass er diesen Code ausführen soll, wenn der Bildschirm größer als 320 Pixel und kleiner als 1156 Pixel ist. Fügen Sie den folgenden Inhalt in CSS hinzu, um den Anzeigestil verschiedener Bildschirme anzupassen:
/* Großer Bildschirm: größer oder gleich 1200px*/
@media (Mindestbreite: 1200px) { ... }
/*Standard*/
@media (Mindestbreite: 980px) {...}
/* Auflösung zwischen Tablet und Computer mit kleinem Bildschirm*/
@media (min. Breite: 768px) und (max. Breite: 979px) { ... }
/* Auflösung zwischen einem horizontal platzierten Telefon und einem vertikal platzierten Tablet*/
@media (maximale Breite: 767px) { ... }
/* Horizontal platzierte Mobiltelefone und Geräte mit geringerer Auflösung*/
@media (maximale Breite: 480px) { ... }
Dies ist das Ende dieses Artikels über die Implementierungsbeispiele der CSS-Bildschirmgrößenanpassung. Weitere relevante Inhalte zur CSS-Bildschirmanpassung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Viewport-Parameter für mobile Browser (Web-Frontend-Design)
>>: js verwendet FileReader zum Lesen lokaler Dateien oder Blobs
Artikel empfehlen
Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre
Vorwort Eines Tages wurde ich plötzlich nach der ...
Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript
Inhaltsverzeichnis 1. classList-Attribut 2. Prakt...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte
Vorwort Heutzutage gibt es viele Geräte, darunter...
MySQL 8.0 MIT Abfragedetails
Inhaltsverzeichnis Informationen zu WITH-Abfragen...
Detaillierte Schritte zur Installation von Harbor, einem privaten Docker-Repository
Die Installation von Harbor ist ziemlich einfach,...
Details zu Linux-Dateideskriptoren, Dateizeigern und Inodes
Inhaltsverzeichnis Linux - Dateideskriptor, Datei...
Detaillierte Erläuterung des Ausführungsplans, Beispiel für einen Befehl in MySQL
Vorwort Der Befehl „Explain“ ist die primäre Mögl...
Beispiel für den schnellen Aufbau einer LEMP-Umgebung mit Docker
LEMP (Linux + Nginx + MySQL + PHP) ist heutzutage...
Einige grundlegende Anweisungen für Docker
Inhaltsverzeichnis Einige grundlegende Anweisunge...
So verwenden Sie Docker zum Bereitstellen eines Django-Technologie-Stack-Projekts
Mit der Popularität und Reife von Docker ist es a...
Detaillierte Erklärung zur Verwendung der Vue h-Funktion
Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...
Welcher Befehl eignet sich besser für die unscharfe Suche nach Dateien in Linux?
1. Einleitung In diesem Artikel wird hauptsächlic...
MySQL-Platzhalter (erweiterte SQL-Filterung)
Inhaltsverzeichnis Lassen Sie uns zunächst kurz P...
Detaillierte Erläuterung der Prinzipien und der Verwendung von gespeicherten MySQL-Prozeduren
Dieser Artikel erläutert anhand von Beispielen di...