Detaillierte Erläuterung der mobilen REM-Layout-Anpassungsmethode für die H5-Aktivitätsseite

Wie kann ich das Layout wiederherstellen, nachdem ich den Designentwurf erhalten habe? Wenn Sie nur ein nicht exaktes Responsive Design benötigen, 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. In diesem Artikel werden hauptsächlich relevante Informationen vorgestellt, die die mobile REM-Layout-Anpassungsmethode von H5-Aktivitätsseiten ausführlich erläutern. Ich hoffe, dass sie allen helfen kann.

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 Die Schriftgröße des HTML-Tags dynamisch festlegen

Das erste Problem ist die dynamische Berechnung der Schriftgröße des HTML-Tags. Dies hängt davon ab, wie das Konvertierungsverhältnis vereinbart wird. 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)

Darüber hinaus gibt es für H5-Aktivitätsseiten im Vollbildmodus Anforderungen an das Seitenverhältnis, 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);
}

Nach dieser Skalierungsmethode kann auf fast jedem Gerät eine gleiche Skalierung erreicht werden. Präzises Layout.

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 einem relative 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 rem Layout Schema-Entwicklungsmethode

Durch die obige Methode wird das REM-Layoutschema 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 ist das Der CSS-Stil kann folgendermaßen 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 abgelesen werden Bildelementausgabe durch den Entwurfsentwurf; die Auswahl oben/links. Der Wert kann schnell durch Verschieben von Hilfslinien zur Position von Elementen in Photoshop ermittelt werden.

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;
    }
}

Verwandte Empfehlungen:

Beispielcode für CSS-Rasterlayout

Welche Techniken gibt es für das CSS-Layout?

Detaillierte Grafik- und Texterklärung von Layout-Tags und Listen-Tags in HTML

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der mobilen REM-Layout-Anpassungsmethode für die H5-Aktivitätsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!