移动端动态调整rem-响应式适配

移动端动态调整rem - 响应式适配

JS适配

(function (window, document) {
    function resize() {
        console.log(window.innerWidth);
        let ww = window.innerWidth; //整个浏览器窗口的宽度；
        if (ww > window.screen.width) { //用户屏幕的宽度；
            window.requestAnimationFrame(resize)
        } else {
            if (ww > 750) {
                ww = 750
            }
            document.documentElement.style.fontSize = ww * 100 / 750 + 'px'
        }
    }

    resize();

    window.addEventListener('resize', resize)
})(window, document);

vw适配（推荐）

如果你了解设计稿你就懂了，其实很简单：\ 首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？ 是不是 1px = 100 / 750 vw = 0.13333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

1px = 100 / 750 vw\ 750宽的设计图是font-size: 13.33333vw

1px = 100 / 650 vw

650宽度的设计图是font-size: 15.38461vw\ 思路过程：

mobile.width = 750px => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

即：我们把html:{font-size: 13.33vw} // 也就是以100px位基准；1rem = 100px;

现在就好算多了；移动端的尺寸 / 100 = XXX rem；

设计稿宽度 750px 的代码：

html {
  font-size: calc(100vw / 750 * 100);
}