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
Einführung und Verwendung von Triggern und Cursorn in MySQL
Trigger-Einführung Ein Trigger ist eine spezielle...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein,...
So generieren Sie ein Kommentarskript für die Hive-Tabellenerstellungsanweisung in MySQL-Metadaten
Vorwort Dieser Artikel stellt hauptsächlich den r...
So konfigurieren Sie Benutzerrollenberechtigungen in Jenkins
Die Jenkins-Konfiguration von Benutzerrollenberec...
Schritte zur Lösung des Zeitzonenproblems in MySQL 8.0
Softwareversion Windows: Windows 10 MySQL: mysql-...
Sehr praktisches Tutorial zur umfassenden Zusammenfassung der MySQL-Funktionen und detaillierten Beispielanalysen
Inhaltsverzeichnis 1. Beschreibung der Funktionen...
Zusammenfassung der SQL-Deduplizierungsmethoden
Wenn wir SQL zum Extrahieren von Daten verwenden,...
CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern
Beim Front-End-Layout des Formulars müssen wir hä...
Schritte zur Einführung von PWA in ein Vue-Projekt
Inhaltsverzeichnis 1. Abhängigkeiten installieren...
jQuery realisiert den Gleiteffekt des Dropdown-Menüs
Wenn wir eine Webseite erstellen, möchten wir man...
Der Unterschied und die Verwendung von distinct und row_number() over() in SQL
1 Einleitung Wenn wir SQL-Anweisungen schreiben, ...
Foreman Ubuntu16 Schnellinstallation
Kurzanleitung Das Foreman-Installationsprogramm i...
Detaillierte Einführung und Verwendungsbeispiele für Map-Tag-Parameter
Karten-Tags müssen paarweise vorkommen, d. h. <...
Erläuterung der Verwendungsszenarien von SQL und verschiedenen NoSQL-Datenbanken
SQL ist der Hauptstamm. Warum ich das so verstehe...
Einführung in die Generierung von Kubernetes-Zertifikaten mit OpenSSL
Kubernetes unterstützt drei Arten der Authentifiz...