Ausführliche Erläuterung der reaktionsfähigen HTML5-Lösung der PX-Einheit

Die in den letzten Jahren am häufigsten verwendete mobile H5-Responsive-Lösung ist die REM-Lösung. Dies erfordert die Berechnung der Schriftgröße des Stammelements, um eine Reaktionsfähigkeit zu erreichen. Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur HTML5-Responsive-Lösung der px-Einheit vor und hofft, Ihnen dabei zu helfen.

Aber diese Lösung hat auch einen Nachteil: Wenn die Schriftgröße keine Ganzzahl ist, verwenden einige Schriftarten REM-Einheiten, was zu Problemen mit der Größe der Schriftart führt. Dies ist immer noch ein Problem Projekte mit hohen Anforderungen an die visuelle Wiederherstellung bereiten der Front-End-Entwicklung Kopfzerbrechen.

Die Lösung der Front-End-Reaktionsfähigkeit ist nichts anderes als die normale Anzeige auf verschiedenen Geräten. Hier ist eine reaktionsfähige Lösung, die keine Rem erfordert. Wir sprechen hier direkt von einem Designentwurf, der auf 750 Pixel basiert. Wie viele px messen Sie im Designentwurf? Schreiben Sie direkt, wie viele px im Stil

. Ist das nicht sehr schnell und erfordert keine Rem-Konvertierung?

1. transform

2. transform-origin

Dies ist eigentlich die Skalierungs-Zoom-Seite unter Verwendung der Transformationsgröße Reaktionsfähigkeit zu erreichen.

Kerncode:

let screenMatch = () => {
            document.body.style.setProperty('visibility', 'hidden')
            let page = document.getElementById("page");
            let _scale = window.outerWidth/750;
            
            page.style.setProperty("transformOrigin", "0 0");
            page.style.setProperty("transform", "scale("+ _scale + ")");
            //兼容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 + ")");
                //兼容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 ID-Seite der Startknoten des gesamten Seitenelements und das erste Element unter dem Textkörper. Hier muss body/html min-height:100%;height:100%; festlegen.

Tatsächlich können wir im Miniprogramm auch px-Einheiten verwenden, aber wenn wir transform im Miniprogramm verwenden, ist dies der Fall Es kann sich um einen Fehler mit gezackten Schriftarten handeln, ich habe schließlich nur das Zoom-Attribut geändert und aus Kompatibilitätsgründen -webkit-zoom verwendet. Der Kerncode unterscheidet sich nicht wesentlich von h5. Das Gleiche gilt für die Zoomgröße.

Verwandte Empfehlungen:

Tutorial zur Produktion von responsiven HTML5-Bannern

Detaillierte Einführung in den Beispielcode für die Implementierung eines Neun-Quadrat-Rasters im Html5 Responsive Design (Bild)

Top Ten HTML5 Responsive Framework_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der reaktionsfähigen HTML5-Lösung der PX-Einheit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!