我們知道，rem是一個css單位，指的是HTML根節點的字體大小。

MDN：css單位

而我們在用rem布局的時候必然會遇到一個問題：我們需要根據用戶的屏幕大小去計算rem。

以下是代碼。（在VUE中使用）

...
    created() {
        
        // rem 適配
        (function(win) {
            var docEl = win.document.documentElement;
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                
 
if (width >= 1920) {
                    // 最大寬度
                    width = 1920;
                }
                var rem = width / 19.2;
                if (rem > 100) {
                    rem = 100;
                }
                docEl.style.fontSize = rem + "px";
                if (width < 1366) {
                    docEl.style.fontSize 
 
= 70 + "px";
                }
            }
            win.addEventListener(
                "resize",
                function() {
                    refreshRem();
                },
                false
            );
            win.addEventListener(
                "pageshow",
                
 
function(e) {
                    if (e.persisted) {
                        refreshRem();
                    }
                },
                false
            );
            refreshRem();
        })(window);
        
    },
...

以上。

vue : rem自適應的應用