Analyse de la méthode d'adaptation de la disposition REM du terminal mobile de la page d'activité H5

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. Le contenu est assez bon. Je vais le partager avec vous maintenant et le donner comme référence.

Après avoir obtenu le brouillon de conception, comment restaurer la mise en page ?

Si vous avez uniquement besoin de créer un design réactif non exact, alors utiliser des requêtes multimédias pour y parvenir est OK. 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.

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 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é mentionnée plus souvent 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)

In. De plus, pour la page d'activités H5 en plein écran, il existe des exigences concernant le rapport largeur/hauteur, et des ajustements doivent être effectués à ce stade. 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 en page précise avec une mise à l'échelle proportionnelle peut être obtenue sur presque tous les appareils.

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 la largeur du brouillon de conception comme exemple 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 une position de page relative en haut : 321px ; 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;
}

2.3 Méthode de développement du schéma de mise en page rem

Grâce à la méthode ci-dessus, le schéma de disposition 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 précédent, 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 de l'élément d'image généré par le brouillon de conception ; être rapidement positionné en déplaçant la ligne de référence dans Photoshop get.

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Plus de contenu connexe Veuillez faire attention au site Web chinois PHP !

Recommandations associées :

Comment utiliser la page Web H5 intégrée de WeChat pour résoudre le problème de l'échec du compte à rebours JS

Comment créer du HTML5 copie côté mobile Fonction

Méthode de détection d'écran horizontale et verticale H5

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!