Analyse der REM-Layout-Anpassungsmethode für mobile Endgeräte der H5-Aktivitätsseite

In diesem Artikel werden hauptsächlich relevante Informationen vorgestellt, die die mobile REM-Layout-Anpassungsmethode von H5-Aktivitätsseiten ausführlich erläutern. Der Inhalt ist jetzt recht gut und dient als Referenz.

Wie kann ich das Layout wiederherstellen, nachdem ich den Designentwurf erhalten habe?

Wenn Sie nur ein nicht exaktes responsives Design erstellen müssen, ist die Verwendung von Medienabfragen zur Erreichung dieses Ziels in Ordnung. Wenn es notwendig ist, den Entwurfsentwurf genau wiederherzustellen, wird dies normalerweise durch Zoomen erreicht. Zu den gängigen Lösungen gehören Ansichtsfenster-basierte und Rem-basierte Skalierungslösungen.

1 Ansichtsfenster-Skalierungslösung

Auf der mobilen Seite kann das Ansichtsfenster-Skalierungsverhältnis verwendet werden, um den Zweck zu erreichen.

Einfach ausgedrückt stimmen alle Breiten- und Höhenpixel mit der Ausgabe des Modells überein, und dann wird das Ansichtsfenster dynamisch durch das Verhältnis der Seitenbreite zur Breite des Modells festgelegt. Kerncode-Referenz der Skalierungslösung:

(function () {
    var docEl = document.documentElement;
    var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent);

    function setScale() {
        var pageScale = 1;

        if (window.top !== window) {
            return pageScale;
        }

        var width = docEl.clientWidth || 360;
        var height = docEl.clientHeight || 640;
        if (width / height >= 360 / 640) {
            // 高度优先
            pageScale = height / 640;
        } else {
            pageScale = width / 360;
        }

        var content = 'width=' + 360 + ', initial-scale=' + pageScale 
          + ', maximum-scale=' + pageScale + ', user-scalable=no';
        document.getElementById('viewport').setAttribute('content', content);
        window.pageScale = pageScale;
    }
    if (isMobile) {
        setScale();
    } else {
        docEl.className += ' pc';
    }
})()

Diese Lösung wurde letztes Jahr in unserem H5-Aktivitätsseitendesign praktiziert.

Aber wenn Sie möchten, dass es auf dem PC angezeigt wird, kann es nur mit einem festen Wert eingestellt werden, da es kein Zoomkonzept für das Ansichtsfenster gibt, was nicht ideal ist.

2 rem Layout Adaptation Solution

rem Layout Adaptation Solution wurde oft erwähnt und wird häufig in den Produkten großer Internetunternehmen verwendet.

Einfach ausgedrückt ist die Methode:

1. Dynamische Berechnung und Einstellung der Schriftgröße des HTML-Root-Tags entsprechend dem Verhältnis des Designentwurfs zur Breite des Geräts;

2. In CSS werden die Breite, Höhe, relative Position usw. der Entwurfselemente entsprechend dem gleichen Verhältnis in Werte umgewandelt 🎜>

3. Design Die Schriftarten im Manuskript verwenden px als Einheit und werden durch Medienabfragen leicht angepasst.

Lassen Sie uns ein Beispiel zur Veranschaulichung geben.

2.1 Stellen Sie die Schriftgröße des HTML-Tags dynamisch ein

Das erste Problem ist die dynamische Berechnung der Schriftgröße des HTML-Tags. Dies hängt davon ab, wie man sich auf das Konvertierungsverhältnis einigt. Am Beispiel von zehn gleichen Teilen der Seitenbreite lautet die Kerncode-Referenz:

(function(WIN) {
    var  setFontSize = WIN.setFontSize = function (_width) {
        var  docEl = document.documentElement; 
        // 获取当前窗口的宽度
        var  width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width;
        // 大于 1080px 按 1080
        if (width > 1080) { 
            width = 1080;
        }
        var  rem = width / 10;
        console.log(rem);
        docEl.style.fontSize = rem + 'px';
       // 部分机型上的误差、兼容性处理
        var  actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);
        if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
            var remScaled = rem * rem / actualSize;
            docEl.style.fontSize = remScaled + 'px';
        }
    }
    var timer;
    //函数节流
    function dbcRefresh() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 100);
    }
    //窗口更新动态改变 font-size
    WIN.addEventListener('resize', dbcRefresh, false);
    //页面显示时计算一次
    WIN.addEventListener('pageshow', function(e) {
        if (e.persisted) { 
            dbcRefresh() 
        }
    }, false);
    setFontSize();
})(window)

Außerdem gilt: Für die H5-Aktivitätsseite, die im Vollbildmodus angezeigt wird, gibt es Anforderungen an das Verhältnis von Breite zu Höhe, und zu diesem Zeitpunkt sollten Anpassungen vorgenommen werden. Das geht so:

function adjustWarp(warpId = '#warp') {
    // if (window.isMobile) return;
    const $win = $(window);
    const height = $win.height();
    let width = $win.width();
    // 考虑导航栏情况
    if (width / height < 360 / 600) {
        return;
    }
    width = Math.ceil(height * 360 / 640);
    $(warpId).css({
        height,
        width,
        postion: &#39;relative&#39;,
        top: 0,
        left: &#39;auto&#39;,
        margin: &#39;0 auto&#39;
    });
    // 重新计算 rem
    window.setFontSize(width);
}

Mit dieser Skalierungsmethode lässt sich auf fast jedem Gerät ein präzises Layout mit proportionaler Skalierung erzielen.

2.2 Elementgrößenwertmethode

Das zweite Problem ist der Wert der Elementgröße.

Nehmen wir als Beispiel die Breite des Designentwurfs von 1080 Pixel. Wir teilen die Breite zur einfachen Konvertierung in 10 gleiche Teile, dann ist 1rem = 1080 / 10 = 108 Pixel. Die Konvertierungsmethode ist:

const px2rem = function(px, rem = 108) {
    let remVal = parseFloat(px) / rem;
    if (typeof px === "string" && px.match(/px$/)) { 
        remVal += 'rem';
    }

    return remVal;
}

Zum Beispiel gibt es im Designentwurf ein Bild mit einer Größe von 460x210 und einer relativen Seitenposition von oben: 321px; links: 70; Gemäß der oben genannten Konvertierungsmethode sollte der endgültige CSS-Stil des Elements sein:

.img_demo {
    position: absolute;
    background-size: cover;
    background-image: url('demo.png');
    top: 2.97222rem;
    left: 0.64814rem;
    width: 4.25926rem;
    height: 1.94444rem;
}

2.3 Entwicklungsmethode des REM-Layoutplans

Durch die obige Methode wird das Rem-Layout-Schema realisiert. Eine manuelle Berechnung des rem-Werts ist jedoch offensichtlich unrealistisch.

Mit dem Vorverarbeitungstool less/sass müssen wir nur die Mixins-Methode festlegen und dann den Wert entsprechend der tatsächlichen Größe des Designentwurfs übernehmen. Am Beispiel von Less lautet die Mixins-Referenz wie folgt:

// px 转 rem
.px2rem(@px, @attr: 'width', @rem: 108rem) {
    @{attr}: (@px / @rem);
}

.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) {
    .px2rem(@top, top, @rem);
    .px2rem(@left, left, @rem);
    .px2rem(@width, width, @rem);
    .px2rem(@height, height, @rem);
}

Für das Beispielelement im vorherigen Artikel kann der CSS-Stil wie folgt geschrieben werden:

.img_demo {
    position: absolute;
    background-size: cover;
    background-image: url('demo.png');
    .px2remTLWH(321, 70, 460, 210);
}

Hier kann die Breite und Höhe direkt aus der Größe des vom Designentwurf ausgegebenen Bildelements abgelesen werden; erhalten Sie schnell, indem Sie die Referenzlinie verschieben, um das Element in Photoshop zu positionieren.

2.4 Schriftarten verwenden px als Einheit

Schriftarten, die eine remproportionale Skalierung verwenden, müssen nur Medienabfragen verwenden, um mehrere Größen festzulegen.

Beispielreferenz:

// 字体响应式
@media screen and (max-width: 321px) {
    body {
        font-size: 13px;
    }
}

@media screen and (min-width: 321px) and (max-width: 400px) {
    body {
        font-size: 14px;
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size: 16px;
    }
}

Ich hoffe, dass es für das Lernen aller hilfreich sein wird Aufmerksamkeit auf weitere verwandte Inhalte der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie die eingebettete H5-Webseite von WeChat, um das Problem des JS-Countdown-Fehlers zu lösen

So erstellen Sie HTML5 Kopieren auf der mobilen Seite Funktion

H5 horizontale und vertikale Bildschirmerkennungsmethode

Das obige ist der detaillierte Inhalt vonAnalyse der REM-Layout-Anpassungsmethode für mobile Endgeräte der H5-Aktivitätsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!