根据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 设置为2remheight: 2rem;background: #ccc;span {// 1366 宽情况下的20px 字体，设置为0.2remfont-size: 0.2rem;}}
}
</style>

拓展大屏，考虑竖向情况

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

解决方案：

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

<button @click="full">全屏</button>
<button @click="exit">退出全屏</button>// 全屏判断
full() {//  指定需要放大全屏divlet element = document.getElementById("main-warp");let requestMethod =element.requestFullScreen || //W3Celement.webkitRequestFullScreen || //Chrome等element.mozRequestFullScreen || //FireFoxelement.msRequestFullScreen; //IE11if (requestMethod) {requestMethod.call(element);} else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}},// 退出全屏
exit() {let exitMethod =document.exitFullscreen || //W3Cdocument.mozCancelFullScreen || //Chrome等document.webkitExitFullscreen || //FireFoxdocument.webkitExitFullscreen; //IE11if (exitMethod) {exitMethod.call(document);} else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}},

后续更多方案再更新

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

HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计...
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
HTML5期末大作业：全屏页面滚动漫画风格个人主页网站设计 (HTML+CSS)
HTML5期末大作业:漫画风格个人主页网站设计--html5漫画风格个人主页全屏页面滚动模板 HTML+CSS 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, ...
android 字体大小换算,Android单位换算与UI适配
一,pt.px.屏幕尺寸.分辨率及ppi关系与单位换算 pt(point):磅,一个标准的固定长度单位,大小为1/72英寸. 主要用于印刷和平面设计 1inch = 2.54cm = 72pt px( ...
系统字体大小导致rem布局变大
缘由:内部测试都ok,交给客户看的时候,整天变大,本来7.5rem = 750px,实际上大了很多. 各种情况排除后,发现是客户手机字体大小调整到了特大号解决办法 getComputedStyle方 ...
KSO-纯CSS全屏图片,全屏背景图，自适应
个人目前在项目中使用的全屏图片 display: flex;overflow-x: hidden;position: relative;height: 100%;width: 100%;//backg ...
原型图、交互设计、UI图，到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. 做原型是表 ...
原型图、交互设计、UI图的关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. 做原型是表 ...

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

设置rem节点适配

拓展大屏，考虑竖向情况

解决方案：

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

最新文章

热门文章