Explication détaillée de la méthode d'adaptation de la disposition REM mobile pour la page d'activité H5

Après avoir obtenu le brouillon de conception, comment restaurer la mise en page ? Si vous avez uniquement besoin de réaliser une conception réactive non exacte, utiliser des requêtes multimédias pour y parvenir est acceptable. S'il est nécessaire de restaurer avec précision l'ébauche de conception, cela est généralement réalisé grâce au zoom. Les solutions courantes incluent des solutions de mise à l'échelle basées sur les fenêtres d'affichage et sur les rem. Cet article présente principalement des informations pertinentes qui expliquent en détail la méthode d'adaptation de la mise en page REM mobile des pages d'activité H5. J'espère que cela pourra aider tout le monde.

1 solution de mise à l'échelle de la fenêtre d'affichage

Du côté mobile, le rapport de mise à l'échelle de la fenêtre d'affichage peut être utilisé pour atteindre cet objectif.

Pour faire simple, tous les pixels de largeur et de hauteur sont les mêmes que ceux de la sortie de la maquette, puis la fenêtre d'affichage est définie dynamiquement selon le rapport entre la largeur de la page et la largeur de la maquette. Référence du code de base de la solution de mise à l'échelle :

(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';
    }
})()

Cette solution a été mise en pratique dans la conception de notre page d'activité H5 l'année dernière.

Mais si vous souhaitez qu'il soit affiché sur le PC, comme il n'y a pas de concept de zoom sur la fenêtre d'affichage, il ne peut être réglé qu'avec une valeur fixe, ce qui n'est pas idéal.

2 rem Layout Adaptation Solution

rem Layout Adaptation Solution a été beaucoup mentionnée et est largement utilisée dans les produits des grandes sociétés Internet.

En termes simples, la méthode est la suivante :

1. Calcul dynamique et réglage de la taille de police de la balise racine HTML en fonction du rapport entre le brouillon de conception et la largeur de l'appareil ;

2. En css, la largeur, la hauteur, la position relative, etc. des éléments du projet de conception sont convertis en valeurs en unités rem selon la même proportion ; 🎜>

3. Conception Les polices du manuscrit utilisent px comme unité et sont légèrement ajustées via des requêtes multimédias.

Donnons un exemple pour illustrer.

2.1 Définir dynamiquement la taille de police de la balise html

Le premier problème est le calcul dynamique de la taille de police de la balise html. Cela dépend de la manière de se mettre d'accord sur le taux de conversion. En prenant comme exemple dix parties égales de la largeur de la page, la référence du code principal :

(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)

De plus, pour les pages d'activité H5 en plein écran, il existe des exigences concernant le rapport hauteur/largeur, et des ajustements doivent être effectués à ce moment-là. Vous pouvez le faire comme ceci :

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

Selon cette méthode de mise à l'échelle, une mise à l'échelle égale peut être obtenue sur presque tous les appareils. Disposition précise.

2.2 Méthode de valeur de la taille de l'élément

Le deuxième problème est la valeur de la taille de l'élément.

En prenant comme exemple la largeur du brouillon de conception de 1080px, nous divisons la largeur en 10 parties égales pour une conversion facile, puis 1rem = 1080 / 10 = 108px. La méthode de conversion est :

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

    return remVal;
}

Par exemple, il y a une image dans le brouillon de conception avec une taille de 460x210 et un position relative de la page en haut : 321 px ; gauche : 70 ; Selon la méthode de conversion ci-dessus, le style CSS final de l'élément doit être :

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

Disposition rem 2.3 schéma Méthode de développement

Grâce à la méthode ci-dessus, le schéma de mise en page rem est réalisé. Mais calculer manuellement la valeur du rem est évidemment irréaliste.

Avec l'outil de prétraitement less/sass, il nous suffit de définir la méthode mixins, puis de prendre la valeur en fonction de la taille réelle du brouillon de conception. En prenant less comme exemple, la référence des mixins est la suivante :

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

Pour l'élément d'exemple de l'article précédent, l'élément Le style CSS peut être écrit comme ceci :

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

Ici, la largeur et la hauteur peuvent être lues directement à partir de la taille du élément d'image généré par le brouillon de conception ; la sélection du haut/gauche La valeur peut être rapidement obtenue en déplaçant les guides pour positionner les éléments dans Photoshop.

2.4 Les polices utilisent px comme unité

Les polices qui utilisent la mise à l'échelle proportionnelle rem entraîneront des problèmes d'affichage. Il vous suffit d'utiliser des requêtes multimédias pour définir plusieurs tailles.

Exemple de référence :

// 字体响应式
@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;
    }
}

Recommandations associées :

Exemple de code pour la disposition de la grille CSS

Quelles sont les techniques de mise en page CSS

Explication graphique et textuelle détaillée des balises de mise en page et des balises de liste en HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!