根据 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}"); } } },