Maison > interface Web > tutoriel CSS > Adaptation de page web mobile : application de rem

Adaptation de page web mobile : application de rem

PHPz
Libérer: 2017-04-03 14:34:10
original
1953 Les gens l'ont consulté

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 = {}));
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal