根据UI图设计的大小换算REM单位以及大屏页面全屏展示

需求：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.fontSize = (oWidth / pwidth) * prem + "px";
        }

css使用

<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>

拓展大屏，考虑竖向情况

一般大屏情况下，设计师设计的是电脑全尺寸的情况下，例如设计的是1366 * 728 的情况下的大屏
正常的浏览器和电脑尺寸还包括了下面的Dock栏，浏览器上面的网址栏和菜单栏，剩余的可视化区域就很小了，那么如果大屏的情况下，如果保证设计图竖向也1：1 完整正好一屏显示；

解决方案：

高使用vw和百分比的单位；
- 全部的高换算成vh或者百分比的单位，需要根据UI图进行进一步的换算百分比
大屏情况下，设置最小宽高，更小则不再支持缩放，提示用户进来观看大屏使用浏览器全屏模式

<button @click="full">全屏</button>
<button @click="exit">退出全屏</button>

// 全屏判断
full() {
            //  指定需要放大全屏div
            let element = document.getElementById("main-warp");
            let requestMethod =
                element.requestFullScreen || //W3C
                element.webkitRequestFullScreen || //Chrome等
                element.mozRequestFullScreen || //FireFox
                element.msRequestFullScreen; //IE11
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") {
                //for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        },
        
// 退出全屏
exit() {
            let exitMethod =
                document.exitFullscreen || //W3C
                document.mozCancelFullScreen || //Chrome等
                document.webkitExitFullscreen || //FireFox
                document.webkitExitFullscreen; //IE11
            if (exitMethod) {
                exitMethod.call(document);
            } else if (typeof window.ActiveXObject !== "undefined") {
                //for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        },