Die in den letzten Jahren am häufigsten verwendete h5-Responsive-Lösung für mobile Endgeräte ist die REM-Lösung. Dies erfordert die Berechnung der Schriftgröße des Stammelements, um eine Reaktionsfähigkeit zu erreichen.
Diese Lösung hat jedoch auch einen Nachteil: Wenn die Schriftgröße keine Ganzzahl ist, verwenden einige Schriftarten REM-Einheiten, was zu Problemen mit der Größe der Schriftartenanzeige führt. Dies bereitet der Front-End-Entwicklung für Projekte immer noch Kopfzerbrechen mit hohen Anforderungen an die optische Restaurierung.
Die Lösung der Front-End-Reaktionsfähigkeit bedeutet nichts anderes, als auf verschiedenen Geräten normal anzeigen zu können. Hier stellen wir eine reaktionsfähige Lösung vor, die keine rem-Methode erfordert. Wir sprechen hier direkt von einem Designentwurf, der auf 750 Pixel basiert. Wie viele Pixel haben Sie im Designentwurf gemessen?
Schreiben Sie direkt, wie viele Pixel. Ist das nicht sehr schnell und erfordert keine Rem-Konvertierung?
Hier verwenden wir tatsächlich die Skalierung der Transformation, um die Seitengröße zu skalieren und so eine Reaktionsfähigkeit zu erreichen.
Kerncode:
let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') let page = document.getElementById(page); let _scale = window.outerWidth/750; , 0 0); page.style.setProperty(transform, scale(+ _scale + )); //Kompatibel mit ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin , 0 0); page.style.setProperty(transform, scale(+ _scale + )); //Kompatibel mit ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); document.body.style.setProperty('visibility', 'visible ') }, 100); } screenMatch(); window.onresize = screenMatch;Im obigen Code ist der Knoten mit der Seiten-ID der Startknoten des gesamten Seitenelements und das erste Element unter dem Textkörper. Hier muss body/html min-height:100%;height:100%;
Tatsächlich können wir px-Einheiten auch in Miniprogrammen verwenden, aber bei der Verwendung von „transform“ in Miniprogrammen treten einige Fehler in der Schriftart auf. Schließlich haben wir aus Kompatibilitätsgründen nur das Zoom-Attribut geändert und -webkit-zoom verwendet. Der Kerncode unterscheidet sich nicht wesentlich von h5. Das Gleiche gilt für die Zoomgröße.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.