移动端网站根据设计稿动态设置rem

一、例如设计的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即可

 

五、首先设置html基准值

html{
    font-size: 62.5%;
}

 

六、手机端长宽单位使用rem不适配QQ浏览器、UC浏览器、OPPO自带浏览器，解决办法，宽度单位：vw，高度单位：vh