Explication détaillée de la méthode d'adaptation de la mise en page rem de page HTML5-Tutoriel H5-php.cn

Explication détaillée de la méthode d'adaptation de la mise en page rem de page HTML5

小云云

Libérer： 2018-01-15 09:54:19

original

5221 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de la méthode d'adaptation de la mise en page rem des pages HTML5. L'éditeur pense que c'est assez bon. Maintenant, je vais la partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Solution d'adaptation de mise en page rem

La méthode principale est :

Calcul dynamique basé sur le rapport entre l'avant-projet et la largeur de l'appareil Et définissez la taille de la police de la balise racine HTML
En CSS, la largeur, la hauteur, la position relative, etc. des éléments du brouillon de conception sont convertis en valeurs en unités rem selon la même proportion. ;
La police dans le brouillon de conception utilise px comme unité et est légèrement ajustée via les requêtes multimédias.

1 Définir dynamiquement la taille de la police de la balise HTML

Version universelle simplifiée :

!(function(win, doc){
  function setFontSize() {
    // 获取window 宽度
    // zepto实现 $(window).width()就是这么干的
    var winWidth =  window.innerWidth;
    // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + &#39;px&#39; ;
    
    // 640宽度以上进行限制 需要css进行配合
    var size = (winWidth / 640) * 100;
    doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;
  }

  var evt = &#39;onorientationchange&#39; in win ? &#39;orientationchange&#39; : &#39;resize&#39;;

  var timer = null;

  win.addEventListener(evt, function () {
    clearTimeout(timer);

    timer = setTimeout(setFontSize, 300);
  }, false);

  win.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      clearTimeout(timer);

      timer = setTimeout(setFontSize, 300);
    }
  }, false);
  // 初始化
  setFontSize();

}(window, document));

Copier après la connexion

Configuration élevée et version précise :

(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 + &#39;px&#39;;

        // 误差、兼容性处理
        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 + &#39;px&#39;;
        }
    }

    var timer;

    function dbcRefresh() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 100);
    }

    //窗口更新动态改变 font-size
    WIN.addEventListener(&#39;resize&#39;, dbcRefresh, false);
    //页面显示时计算一次
    WIN.addEventListener(&#39;pageshow&#39;, function(e) {
        if (e.persisted) { 
            dbcRefresh() 
        }
    }, false);
    setFontSize();
})(window)


//对H5活动推过页面，宽高比例有所要求，可适当调整

function adjustWarp(warpId = &#39;#warp&#39;) {

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

Copier après la connexion

2 Définition de rem via une requête multimédia CSS3

Facile à utilisation Veuillez consulter la démo pour plus de flexibilité. Vous saurez que

@media screen and ( min-width: 320px){html{font-size:50px}}
@media screen and ( min-width: 360px){html{font-size:56.25px}}
@media screen and ( min-width: 375px){html{font-size:58.59375px}}
@media screen and ( min-width: 384px){html{font-size:60px}}
@media screen and ( min-width: 400px){html{font-size:62.5px}}
@media screen and ( min-width: 414px){html{font-size:64.6875px}}
@media screen and ( min-width: 424px){html{font-size:66.25px}}
@media screen and ( min-width: 480px){html{font-size:75px}}
@media screen and ( min-width: 540px){html{font-size:84.375px}}
@media screen and ( min-width: 640px){html{font-size:100px}}

Copier après la connexion

peut être modifié de manière appropriée en fonction des besoins personnels du projet et de la conception du produit. unique et fixe.

Recommandations associées :

Javascript utilise rem pour le partage d'exemples de développement réactif

Méthode d'implémentation de deux mises en page rem mobiles

Exemple pour expliquer js pour réaliser le calcul automatique de correspondance rem taille de police

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!