淘宝无限适配方案

原理

主要基于REM单位和JavaScript动态调整根元素字体大小，以实现不同设备屏幕尺寸下的良好布局效果。

1. REM单位：REM（root em）是一种相对单位，它相对于HTML根元素的字体大小。这意味着，如果我们改变了HTML根元素的字体大小，那么所有基于REM单位的元素都会随之缩放。
2. 动态调整字体大小：通过JavaScript监听窗口的resize事件，根据屏幕宽度动态调整HTML根元素的字体大小。这样，所有使用REM单位的元素就能根据屏幕宽度自动调整大小，实现自适应布局。

实现步骤

1. 初始化根元素字体大小：在HTML头部引入一段JavaScript代码，这段代码会根据屏幕宽度计算出一个合适的基准字体大小，并将其应用到HTML根元素上。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };

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

clientWidth / 320 的比例可以根据设计稿的基准尺寸进行调整。例如，如果设计稿是基于750px宽度的，那么比例应该是 clientWidth / 750。

2. 使用REM单位：在CSS中，将所有布局相关的尺寸都定义为REM单位，例如

.container {
    width: 70rem; /* 假设设计稿中宽度为700px */
    padding: 1rem;
}

优点

• 灵活性：能够根据屏幕宽度自动调整布局，适用于各种屏幕尺寸的设备。
• 易于维护：使用REM单位，可以减少CSS中硬编码的像素值，使得样式更容易调整和维护。

注意事项

• 基线问题：由于字体大小的变化，可能会导致文本基线不一致的问题，需要额外处理。
• IE兼容性：老版本的IE浏览器可能不支持REM单位，需要考虑兼容性解决方案。
• 性能考量：动态调整字体大小的脚本需要在每次窗口大小改变时执行，可能会对性能产生一定影响。