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
So deaktivieren Sie die Eslint-Erkennung in Vue (mehrere Methoden)
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Ein kurzer Vortrag über die Geschichte von React Router
Wenn Sie React Router verstehen möchten, sollten ...
Docker stellt über einen Port eine Verbindung zu einem Container her
Docker-Container-Verbindung 1. Netzwerk-Port-Mapp...
Detaillierte Erklärung der Lösung zur Bildverformung unter Flex-Layout
Flex-Layout ist heutzutage eine häufig verwendete...
So installieren Sie MySQL über Yum auf CentOS7
1. Überprüfen Sie, ob MySQL installiert ist Yum-L...
Eine kurze Analyse des MySQL-Index
Ein Datenbankindex ist eine Datenstruktur, deren ...
Implementierung des klassischen CSS-Sticky-Footer-Layouts
Was ist ein Sticky-Footer-Layout? Unser übliches ...
Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA
Schauen wir uns zunächst meine grundlegende Entwi...
Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch
Dieser Artikel stellt Nginx ausführlich vor, von ...
Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React
Inhaltsverzeichnis Installieren und Einführen von...
Detaillierte Erklärung zur Verwendung des Schlüsselworts ESCAPE in MySQL
MySQL-Escape Escape bedeutet die ursprüngliche Se...
Pycharm2017 realisiert die Verbindung zwischen Python3.6 und MySQL
In diesem Artikel erfahren Sie, wie Sie Python3.6...
Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3
Beim Abspielen von Musik werden die Liedtexte im ...
So stellen Sie Go-Webanwendungen mit Docker bereit
Inhaltsverzeichnis Warum brauchen wir Docker? Bei...
Detaillierte Erläuterung zur Lösung des Zirkelreferenzproblems bei der Verwendung von JSON.stringify
Wenn Programmierer täglich TypeScript-/JavaScript...