一、例如設計的UI圖尺寸是1366寬的，則正常頁面往下滾動的是情況下，輸入UI圖設計的尺寸，可以是1366，也可以是1920 等；於是就用rem單位適配，根據根節點換算

// 初始化
let self = this;
window.onload = function() {
    /*1366代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫100是
為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
    self.getRem(1366, 100);
};
self.getRem(1366, 100);
window.onresize 
 
= function() {
    self.getRem(1366, 100);
};


// 設計rem節點大小，等比例換算
function getRem(pwidth, prem) {
            let html = document.documentElement;
            let oWidth = window.outerWidth ? window.outerWidth : screen.width;
            html.style.fontSize = (oWidth / pwidth) * prem + "px";
        }

二、使用

<style lang="scss">
.show {
    display: flex;
    .list {
        flex: 1;
        // UI圖寬200px 設定為2rem
        height: 2rem;
        background: #ccc;
        span {
            // 1366 寬情況下的20px 字型，設定為0.2rem
            font-size: 0.2rem;
        }
    }
}
</style>

三、借鑑

原文連結：https://blog.csdn.net/u012036171/java/article/details/99722725

四、自己開發專案

UI設計圖：750px

每個頁面加入js

// 初始化
let self = this;
window.onload = function() {
    /*1366代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫100是
為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
    self.getRem(750, 10);
};
self.getRem(750, 10);
window.onresize = function() {
    self.getRem(750, 10);
};


// 設計rem節點大小，等比例換算
function getRem(pwidth, prem) {
    let html = document.documentElement;
    let oWidth = window.outerWidth ? window.outerWidth : screen.width;
    html.style.fontSize = (oWidth / pwidth) * prem + "px";
}

.logo-int-big {
    font-size: 2.2rem;
}

原設計圖為：22px

因為設定的等比為10，所以用原設計圖除以10即可