Eine kurze Diskussion über die Anpassung mobiler Endgeräte
|
Vorwort Beim Schreiben von Front-End-Code kommt man nie um das Wort „Kompatibilität“ herum. In der PC-Ära der Vergangenheit hatten Programmierer aufgrund der Arroganz des IE Schwierigkeiten, die Kompatibilität mit dem IE zu erreichen. Jetzt scheint uns die Popularität mobiler Geräte Hoffnung zu geben, als ob wir den IE bald loswerden würden, aber! Bevor eine Angriffswelle abebbt, kommt die nächste Welle. ~ Mobile Endgeräte müssen sich nicht um den IE kümmern, und die verschiedenen neuen CSS-Funktionen sind auch sehr angenehm zu verwenden, aber ein großer Berg drückt nach unten, nämlich die Auflösungsanpassung. Da die Anzeigefläche mobiler Endgeräte relativ klein ist, müssen auch die Anzeigedetails der Seite auf Mobiltelefonen mit unterschiedlichen Auflösungen strenger sein. Derzeit sind einige Layoutmethoden mit fester Breite und Höhe wie bei PC-Endgeräten offensichtlich nicht geeignet. Wir müssen in der Lage sein, uns an unterschiedliche Größen von Mobiltelefonseiten anzupassen. Es ist wirklich sehr interessant. Ohne weitere Umschweife sind hier einige gängige Anpassungstechniken für mobile Endgeräte: 1. Prozentsatz Anwendungsszenario: Nur die Breite muss an den Bildschirm angepasst werden, z. B. Textblöcke Der Prozentsatz wird auch häufig bei der PC-Anpassung verwendet, was sehr einfach zu handhaben ist, wird aber im Allgemeinen für Breitenanpassungseinstellungen verwendet. Wenn die Höhe als Prozentsatz festgelegt wird, muss das übergeordnete Element eine klare Höhe haben. 1. Verwenden Sie den Prozentsatz, um den gesamten Bildschirm auszufüllen Um die Elementhöhe effektiv auf 100 % und genau auf die Fensterhöhe einzustellen, müssen Sie die Höhe der HTML- und Body-Elemente und aller ihrer übergeordneten Elemente auf 100 % setzen. Zum Beispiel:
<html style="Höhe: 100%;">
<body style="Höhe: 100%;">
<div Klasse="wrap" Stil="Höhe: 100 %; Breite: 100 %">
Den gesamten Bildschirm ausfüllen</div>
</body>
</html>
Bei der Verwendung der Höhe sind folgende Dinge zu beachten: 100 %;
Nachdem ich so weit geschrieben habe, möchte ich plötzlich einen Exkurs machen. Für absolut positionierte Elemente ist die Verwendung von height: 100% offensichtlich ungültig, da es zu diesem Zeitpunkt vom Dokumentfluss getrennt wurde und seine Höhe nun durch seinen eigenen Inhalt unterstützt wird. Was ist, wenn ich möchte, dass das übergeordnete Feld ausgefüllt wird? Hier kommt schwarze Magie zum Einsatz: Setzen Sie oben, links, unten und rechts den Wert 0, dann wird die Box gestreckt, um die übergeordnete Box auszufüllen. 2. Verwenden Sie den Prozentsatz, um das Seitenverhältnis festzulegen Manchmal möchten wir, dass die Breite adaptiv ist, sich die Höhe mit der Breite ändert und ein festes Seitenverhältnis vorliegt. Schauen wir uns das einmal an. Die Verwendung der prozentualen Höhenangabe funktioniert offensichtlich nicht. Die prozentuale Höhenangabe basiert auf der Höhe des übergeordneten Elements und wir müssen die Höhe auf Grundlage der Breite festlegen. Daher kann hier padding-top oder padding-bottom verwendet werden. Das Padding basiert auf der Breite des übergeordneten Elements. Wir können die Höhe des Elements auf 0 setzen und dann „padding-bottom“ verwenden, um das Element zu strecken und ein festes Seitenverhältnis zu erreichen. 2. rem Anwendungsszenario: Für Szenen, die eine hohe Anpassungsfähigkeit erfordern, wie beispielsweise Bilder rem-Einheit: basierend auf der Stammschriftgröße der Seite, d. h. beispielsweise der Schriftgröße des HTML-Elements
html{
Schriftgröße: 16px;
}
Dann ist 1rem gleich 16px. Bei der Verwendung müssen wir also nur die Stammschriftgröße an die Bildschirmgröße anpassen. Anschließend passen sich alle Elemente auf der Seite, die zum Festlegen von Breite und Höhe Rem-Einheiten verwenden, ebenfalls an die Bildschirmgröße an. Es gibt zwei Möglichkeiten, die Stammschriftgröße entsprechend unterschiedlicher Bildschirmgrößen einzustellen: 1. CSS-Methode zum Festlegen von rem Verwenden Sie Medienabfragen, um die Einstellungen entsprechend der unterschiedlichen Bildschirmgröße vorzunehmen. Der Nachteil besteht darin, dass im Allgemeinen nur einige repräsentative Bildschirmgrößen aufgelistet werden und die Anpassung nicht alle Bereiche vollständig abdecken kann.
html{
Schriftgröße: 10px
}
@media screen und (min-width:321px) und (max-width:375px) {
html{
Schriftgröße: 11px
}
}
@media screen und (min-width:376px) und (max-width:414px) {
html{
Schriftgröße: 12px
}
}
@media screen und (min-width:415px) und (max-width:639px) {
html{
Schriftgröße: 15px
}
}
@media screen und (min-width:640px) und (max-width:719px) {
html{
Schriftgröße: 20px
}
}
@media screen und (min-width:720px) und (max-width:749px) {
html{
Schriftgröße: 22,5px
}
}
@media screen und (min-width:750px) und (max-width:799px) {
html{
Schriftgröße: 23,5px
}
}
@media screen und (min-width:800px) {
html{
Schriftgröße: 25px
}
}
2. JS-Methode zum Festlegen von rem Die Stammschriftgröße wird mithilfe von JS festgelegt. Wenn die Änderung also nach Abschluss des Renderns erfolgt, führt dies zu einem Neufluss und einem Flash-Bildschirm. Daher sollte bei dieser Methode der JS-Code im Kopf und vor der Einführung des CSS platziert werden.
(Funktion (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'Orientierungsänderung' im Fenster? 'Orientierungsänderung': 'Größe ändern',
neu berechnen = Funktion () {
var Clientbreite = docEl.Clientbreite;
wenn (!Clientbreite) return;
docEl.style.fontSize = 20 * (Clientbreite / 375) + 'px';
};
neu berechnen();
wenn (!doc.addEventListener) return;
win.addEventListener(resizeEvt, neu berechnen, falsch);
})(Dokument, Fenster);
Oben ist clientWidth die tatsächliche Bildschirmbreite, 375 ist die Referenzbildschirmbreite, auf der das Design basiert, und 20 ist die Größe von 1rem, wenn die tatsächliche Bildschirmbreite der Referenzbildschirmbreite entspricht. Die Schlüsselparameter 20 und 375 des Codes werden wie folgt eingestellt: a) Da die bereitgestellten Designentwürfe grundsätzlich auf dem iPhone 6/7/8 basieren und eine Breite von 750px und einen dpr von 2 aufweisen, kann die Referenzbildschirmbreite bei der Berechnung von rem auf 375 festgelegt werden. b) Da die Mindestschriftgröße von Chrome 12px beträgt und zur Vereinfachung der Berechnung die Größe von 1rem auf 20px eingestellt werden kann 3. Medienanfragen Anwendungsszenario: Media Queries werden im Allgemeinen für spezielle Verarbeitungszwecke verwendet, wie zum Beispiel 1. Anpassung an Vollbildgeräte wie das iPhoneX 2. Bei der Anpassung an sehr große Bildschirme wie das iPhone Plus oder den horizontalen Bildschirm eines Pads mit einem DPR von 3 muss der kritische Wert entsprechend den Geschäftsanforderungen festgelegt werden. Anschließend müssen unterschiedliche Inhalte angezeigt oder Bilder durch unterschiedliche Auflösungen ersetzt werden (d. h. 2x-Bilder und 3x-Bilder verwendet werden) usw. 4. vw, vh vw ist eine Prozenteinheit basierend auf der Bildschirmbreite, 1vw=1% * Gerätebreite vh ist eine Prozenteinheit basierend auf der Bildschirmhöhe, 1v=1% * Gerätehöhe vw und vh sind zwar sehr nützlich, aber bei ihrer Verwendung müssen immer noch Kompatibilitätsprobleme berücksichtigt werden. Sie funktionieren in den Browsern einiger inländischer Mobiltelefone (wie Huawei) nicht und es wird gesagt, dass sie bei Verwendung des X5-Kernels anfällig für Probleme sind. 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. |
>>: HTML-Beispielcode zur Implementierung des Tab-Wechsels
Artikel empfehlen
Wie InnoDB Transaktionsisolationsebenen geschickt implementiert
Vorwort Im vorherigen Artikel „Detaillierte Erklä...
Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen
Was ist Inhaltsüberlauf? Wenn tatsächlich viel Te...
So implementieren Sie die GZIP-Komprimierung in Nginx, um die Website-Geschwindigkeit zu verbessern
Inhaltsverzeichnis Warum GZIP-Komprimierung verwe...
Beispielcode zur Implementierung der MySQL-Master-Slave-Replikation in Docker
Inhaltsverzeichnis 1. Übersicht 1. Grundsatz 2. U...
So richten Sie den Remotezugriff auf einen Server ein, indem Sie in Windows eine IP-Adresse angeben
Wir haben viele Server, die häufig von externen N...
Codebeispiel für einen einfachen UDP-Server-Client
Ich werde nicht näher auf die Theorie von UDP ein...
MySQL-Trigger: ausführliche Erklärung und einfaches Beispiel
Einfaches Beispiel für einen MySQL-Trigger Gramma...
Zusammenfassung einiger verwandter Vorgänge geplanter Linux-Aufgaben
Ich habe verschiedene große Websites durchsucht u...
So erstellen Sie schnell einen FTP-Dateidienst mit FileZilla
Um die Speicherung und den Zugriff auf Dateien zu...
Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können
Frage Lassen Sie mich zunächst über das Problem s...
Installieren Sie mehrere PHP-Versionen für Nginx unter Linux
Wenn wir die LNPM-Serverumgebung installieren und...
Implementierung der Nginx-Konfiguration HTTPS-Sicherheitsauthentifizierung
1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...
Zwei Beispiele für die Verwendung von Symbolen in Vue3
Inhaltsverzeichnis 1. Verwenden Sie SVG 2. Verwen...
Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen
Das Konzept des relativen Pfades Verwenden Sie de...
Tomcat-Sicherheitsspezifikationen (Tomcat-Sicherheitsverstärkung und -spezifikationen)
Tomcat ist ein Open-Source-Webserver. Das auf Tom...