欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-04 08:20:46
...

设置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节点大小,等比例换算
    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}");
                    }
                }
            },
     

     

相关标签: 杂七杂八

上一篇:

下一篇: