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
So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit
Als ich kürzlich ein WeChat-Applet schrieb, erfor...
Detaillierte Analyse der Auswahl des MySQL-Gemeinschaftsindex und des eindeutigen Index
Nehmen wir ein Benutzerverwaltungssystem an, bei ...
So installieren Sie Elasticsearch und Kibana in Docker
Elasticsearch erfreut sich derzeit großer Beliebt...
Detaillierte Erläuterung der durch schwebende Elemente verursachten Probleme und Lösungen
1. Problem Mehrere schwebende Elemente können die...
Zusammenfassung der Vorteile der Bereitstellung von MySQL Delayed Slaves
Vorwort Die Master-Slave-Replikationsbeziehung vo...
Vue nutzt Baidu Maps zur Realisierung der Stadtpositionierung
In diesem Artikel wird der spezifische Code von V...
MySQL-Sortierung nach konventioneller Sortierung, benutzerdefinierter Sortierung und Sortierung nach chinesischen Pinyin-Buchstaben
Normale MySQL-Sortierung, benutzerdefinierte Sort...
React+Typescript implementiert die Countdown-Hook-Methode
Zunächst wird setInterval als Hook gekapselt 👇 im...
Analyse des Funktionsprinzips und des Implementierungsprozesses von Docker Hub
Ähnlich wie der von GitHub bereitgestellte Code-H...
So blockieren Sie IP und IP-Bereich in Nginx
Vorne geschrieben Nginx ist nicht nur ein Reverse...
Lösen Sie den Konflikt zwischen Docker und VMware
1. Docker-Startproblem: Problem gelöst: Sie müsse...
So migrieren Sie den MySQL-Speicherort auf eine neue Festplatte
1. Bereiten Sie eine neue Festplatte vor und form...
So legen Sie ein Kennwort für MySQL Version 5.6 auf dem Mac fest
MySQL kann bei der Installation festgelegt werden...
Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.
Über die Baumdarstellung von Vue wird im Projekt ...
JS implementiert Layoutkonvertierung in Animation
Beim Schreiben von Animationen mit JS wird häufig...