javascript - 移动开发，Webapp 淘宝手机 rem 布局分析

Question

(function (doc, win) {
var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth<640){
            docEl.style.fontSize = 12 * (clientWidth / 320) + "px";
            console.log(12 * (clientWidth / 320) + "px");
            }else{
                //docEl.style.fontSize = "12px";
              docEl.style.fontSize = 12 * ( 640 / 320) + "px";
            }
    };

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

看了 淘宝的 m.taobao.com 看到 html 的font-size js 做了 body 的 font-size 是 font-size: 12px;

可以分析的淘宝 html 和body 的 font-size 是怎么计算吗

另外 淘宝的 布局的 总宽度 是 10rem 就是遵循 总宽度 10rem 来 分配 内部元素 大小布局的吗

有大神可以指导一下 淘宝的 算法吗

Answer 1

作为淘宝前从业人员，回答下，以前的布局是16rem，现在逐渐转换成10rem。
之前的原因是Android默认要求所有设备将宽度等分为160份。
现在原因是，10作为单位更加容易计算，不容易出现1.3333333333这样的宽度/高度。
无论如何这都只是一种适配方案，尤其对于字体大小适配的时候，这个方案的局限性很大。