Adaptation de page web mobile : application de rem

Les exigences pour le développement adaptatif de pages Web sont multiplateformes, multi-navigateurs, généralement mobile + PC. J'ai écrit quelques pages plein écran pour PC il y a quelques jours, en utilisant des pourcentages sur lesquels je les ai vérifiées. mon téléphone portable. L'effet est bien différent. De ce point de vue, l’adaptabilité mobile+PC est parfois une fausse proposition.

L'adaptation pour les terminaux mobiles est le glissement général en plein écran de la page promotionnelle. Si c'est compliqué, cela ne fonctionnera certainement pas. utilisé pour le traitement par Taobao.com Unit, apprenons cette méthode. Tout d'abord, pour les dessins de conception, la largeur est généralement de 640.

rem : CSS3 ajoute une nouvelle unité relative rem (root em, root em), donc rem doit être défini en html{font-size:1rem ;} ,
Le paramètre Taobao pour cela est basé sur la largeur du téléphone mobile,
cette phrase essentielle : contrôlé par js.

Tout d'abord, c'est différent sur Apple iPhone 6 c'estDans ce paramètre, vous pouvez utiliser le rapport de pixels de l'appareil window.devicePixelRatio
window.clientWitdh*window.devicePixelRatio/10. Cela vous donnera la taille de la police,
et sur Android La plupart d'entre eux sont,
🎜>
font-size est window.clientWitdh/10;

Le code utilisé dans Taobao :

!function(J, I) {

    function H() {
        var d = E.getBoundingClientRect().width;
        d / B > 540 && (d = 540 * B);
        var e = d / 10;
        E.style.fontSize = e + "px",
        z.rem = J.rem = e;
    }
    var G, F = J.document,
    E = F.documentElement,
    D = F.querySelector('meta[name="viewport"]'),
    C = F.querySelector('meta[name="flexible"]'),
    B = 0,
    A = 0,
    z = I.flexible || (I.flexible = {});
    if (D) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var y = D.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        y && (A = parseFloat(y[1]), B = parseInt(1 / A))
    } else {
        if (C) {
            var x = C.getAttribute("content");
            if (x) {
                var w = x.match(/initial\-dpr=([\d\.]+)/),
                v = x.match(/maximum\-dpr=([\d\.]+)/);
                w && (B = parseFloat(w[1]), A = parseFloat((1 / B).toFixed(2))),
                v && (B = parseFloat(v[1]), A = parseFloat((1 / B).toFixed(2)))
            }
        }
    }
    if (!B && !A) {
        var u = (J.navigator.appVersion.match(/android/gi), J.navigator.appVersion.match(/iphone/gi)),
        t = J.devicePixelRatio;
        B = u ? t >= 3 && (!B || B >= 3) ? 3 : t >= 2 && (!B || B >= 2) ? 2 : 1 : 1,
        A = 1 / B
    }
    if (E.setAttribute("data-dpr", B), !D) {
        if (D = F.createElement("meta"), D.setAttribute("name", "viewport"), D.setAttribute("content", "initial-scale=" + A + ", maximum-scale=" + A + ", minimum-scale=" + A + ", user-scalable=no"), E.firstElementChild) {
            E.firstElementChild.appendChild(D)
        } else {
            var s = F.createElement("p");
            s.appendChild(D),
            F.write(s.innerHTML)
        }
    }
    J.addEventListener("resize",
    function() {
        clearTimeout(G),
        G = setTimeout(H, 300)
    },
    !1),
    J.addEventListener("pageshow",
    function(b) {
        b.persisted && (clearTimeout(G), G = setTimeout(H, 300))
    },
    !1),
    "complete" === F.readyState ? F.body.style.fontSize = 12 * B + "px": F.addEventListener("DOMContentLoaded",
    function() {
        F.body.style.fontSize = 12 * B + "px"


    },
    !1),
    H(),
    z.dpr = J.dpr = B,
    z.refreshRem = H,
    z.rem2px = function(d) {
        var c = parseFloat(d) * this.rem;
        return "string" == typeof d && d.match(/rem$/) && (c += "px"),
        c
    },
    z.px2rem = function(d) {
        var c = parseFloat(d) / this.rem;
        return "string" == typeof d && d.match(/px$/) && (c += "rem"),
        c
    }
} (window, window.lib || (window.lib = {}));

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!