【大屏可视化】大屏适配公式

1.大屏适配公式

设计稿尺寸：16：9
大屏：显示16：9
1.如果屏幕很宽，就以高度为基准，左右居中
2.如果屏幕很高，就以宽度为基准，上下居中
3.保持比例不变形

在 head 里用 JS设置 1rem=Wp/100
Wp是页面有效宽度

2.实践：布局和适配

在网站下载设计图之后，在Photoshop中打开
1.测量设计图尺寸工具：m 框选
——打开窗口–信息
——这样可以保证画布大小比例一致
2.取色：取色工具

1.屏幕大小

获取设计图大小：m – ctrl+a
1.全选获取设计图尺寸：一般都是 16:9
——2420:1361（px）
2.全屏截图看电脑尺寸
——1920:1080（px）
调试大小
1.选择：Responsive 响应式，然后自己给尺寸
2.一般先给1：1
计算页面的宽高
1.在 index.html 中的 head中通过 script 标签内获得设备宽高
2.通过下列公式计算得到页面宽高和 1rem 的大小
——简单来说就是
——保持 16:9 的比例，尽可能的以宽/高为基准，占满屏幕
——当设备宽度特别长时，以高度为标准，保持 16:9 计算页面宽度
——当设备高度特别长时，以宽度为标准，保持 16:9 计算页面高度
——1个字节(rem)大小始终等于页面有效宽度除以100

<script>const 设备宽度 = document.documentElement.clientWidthconst 设备高度 = document.documentElement.clientHeightlet 页面宽度if (设备宽度/设备高度 > 16/9){页面宽度 = 设备高度 * (16/9)}else{页面宽度 = 设备宽度}const 页面高度 = 页面宽度 / (16/9)const string = `<style>html{font-size:${页面宽度/100} px}</style>`document.write(string)
</script>

将页面宽高写到div上
注意后面要加像素

<div id="root"><script>root.style.width = pageWidth + 'px'root.style.height = pageHeight + 'px'</script>
</div>

添加默认的CSS
——CSS控制左右居中
——JS控制上下居中

//在style.scss中，左右居中
#root{margin: 0 auto;
}
//在 index.html 中
root.style.marginTop = (clientHeight-pageHeight)/2 + 'px'

2.适配一个div

由于屏幕宽度是不固定的，因此div的宽度是不能写死的，要写成rem（字节大小）
步骤
1.使用表示标尺辅助线，m 获取一个框的大小，记住大小像素
2.创建一个div，其宽高为
——宽 = 测量宽度 / 设计稿宽度 * 100rem
——高 = 测量高度 / 设计高度 *100rem
——其中：页面宽度被换算为 100rem，因此对应宽高的单位也是 rem
——这样计算出来的宽高就能保证这个div永远占有效屏幕的固定比例
3.每次这样计算有点烦，可以声明一个函数，放到 helper.scss 里面

@function px($n){@return $n/设计稿宽度 * 100rem
}
//使用
import helper
width:px(测量宽度)

【大屏可视化】大屏适配公式相关推荐

大数据可视化大屏设计经验，教给你！
前言大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...
大数据可视化大屏图表设计经验，教给你
前言自从跟大家分享第一篇<大数据可视化大屏设计经验,教给你!>,很多小伙伴都会问我一些相关的问题,看了小伙伴给我发的视觉稿,整体都还不错,但是发现图表的设计都有一些问题,大家可能对 ...
【博主推荐】大数据可视化大屏(源码下载)
可视化大屏交流学习提示:本文推荐好的大数据可视化源码,用于学习,用于项目,欢迎大家积极交流.持续更新贴-- 资源目录可视化大屏交流学习一. 某公司大数据展示模版2 二.大数据可视化通用素材三. ...
Qt制作大数据可视化大屏展示电子看板
Qt制作大数据可视化大屏展示电子看板解决当前最火的大数据可视化大屏展示,整个项目通过Qt开发,集成了QML/QChart/ECharts及自定义控件等模块,所有的可视化控件都可以集成到其中.可以随意 ...
大数据可视化大屏设计经验及案例分享
今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计.交互设计.动效设计三个方面来分享. UI设计设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要 ...
大数据可视化大屏设计经验分享
前言大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习 ...
74套大数据可视化大屏模板源码下载
锦鲤已测|74套大数据可视化大屏模板源码下载,直接下载,使用浏览器访问静态页面即可. 最近在做一个市政的项目,用到了大数据可视化界面(装逼,无其他用途) 顺手分享一下给大家吧,有需要可以下载试试.
移动端、后台管理、大屏可视化等项目rem适配（postcss-pxtorem、amfe-flexible）。已自测
vue项目使用element-ui框架Rem适配(postcss-pxtorem.amfe-flexible)的安装使用. 移动端.后台管理.大屏可视化等类型项目皆适用,均已自测. 分步指南 1.安装 ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
echarts学习——（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...

【大屏可视化】大屏适配公式

1.大屏适配公式

2.实践：布局和适配

【大屏可视化】大屏适配公式相关推荐

最新文章

热门文章