根据UI图设计的大小换算REM单位以及大屏页面全屏展示_ui原型图尺寸转换

需求：UI图设计的1366px，产品希望往大了适配，字体和div宽度都需要适配实际页面宽；

设置rem节点适配

• 例如设计的UI图尺寸是1366宽的，则正常页面往下滚动的是情况下，输入UI图设计的尺寸，可以是1366，也可以是1920 等；于是就用rem单位适配，根据根节点换算，关于单位相关的文章之前总结过：理解CSS常见的px/em/rem/vh/vw尺寸单位

以下代码运行框架是Vue；

// 初始化
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节点大小，等比例换算
getRem(pwidth, prem) {
            let html = document.documentElement;
            let oWidth = window.outerWidth ? window.outerWidth : screen.width;
            html.style.font
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17