前言

在做可视化大屏的时候，我们首先要保证UI图的比例不变，例如16:9的UI图，但大屏的比例可能是2:1，很多时候大屏的比例往往很少能与UI图的比例一模一样的，这个时候我们就要利用公式换算来适配大屏。

例如16:9的UI图：

适配大屏

当页面首次加载时，判断视口的宽高，如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽，实际的显示宽度应该等于视口的高度*16/9。

如果视口的宽/高 < 16/9 则说明视口高度比设计图高，实际的显示宽度应该等于视口的宽度，显示高度应等于视口宽度 / (16/9)。

然后设置 font-size: pageWidth / 100 px，这样就可以做到100rem等于100% width，之后所有大小的设置都通过rem来做，这样就可以做到适配任意比例的大屏了。

index.js

<script>const clientWidth = document.documentElement.clientWidthconst clientHeight = document.documentElement.clientHeightwindow.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidthconst pageHeight = pageWidth / (16 / 9)const string = `<style>html{font-size: ${pageWidth / 100}px}</style>`document.write(string)root.style.width = pageWidth + 'px'root.style.height = pageHeight + 'px'root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>

比例大于16/9的：

比例小雨16/9的：

布局

布局可以用flex和grid，这里用grid比较合适。

    <main><section className="bordered section1"></section><section className="bordered section2"></section><section className="bordered section3"></section><section className="bordered section4"></section><section className="bordered section5"></section></main>

// scss
> main {flex: 1;display: grid;padding-top: px(30);grid-template:"box1 box2 box4 box5" 755fr"box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;grid-column-gap: px(28);grid-row-gap: px(28);> .section1 {grid-area: box1;}> .section2 {grid-area: box2;}> .section3 {grid-area: box3;}> .section4 {grid-area: box4;}> .section5 {grid-area: box5;}}

加阴影：

我们可以利用box-shadow，多层叠加阴影来达到这个效果。

例如：box-shadow：1px 2px 3px 4px #0e325f;

box-shadow第一个参数（1px）表示：左右
第二个参数（2px）表示：上下
第三个参数（3px）表示：扩散
第四个参数（4px）表示：范围

代码中实现：

    section {text-align: center;border: 1px solid #0764bc;border-radius: 4px;position: relative;box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;background: #0c1139;&::before {content: '';position: absolute;left: 0;right: 0;bottom: 0;top: 0;border-radius: 4px;box-shadow: 17px 0 0 -16px #0e325f,-17px 0 0 -16px #0e325f,0 17px 0 -16px #0e325f,0 -17px 0 -16px #0e325f,9px 0 0 -8px #0d4483,-9px 0 0 -8px #0d4483,0 9px 0 -8px #0d4483,0 -9px 0 -8px #0d4483,;}}

大屏可视化之适配和布局相关推荐

【前端大屏可视化项目适配方案】
引自 https://juejin.cn/post/7009081081760579591#heading-27 感谢!!! 前端大屏可视化项目适配方案 1. 全局适配 1.1 css scale 适 ...
大屏可视化的适配方案
这里找了几个写的非常不错的文章,分享一下: https://blog.csdn.net/qq_41238459/article/details/122812296?ops_request_misc=& ...
两个大屏可视化案例的布局与实现
近期分别使用了 React 和 Vue 完成了两个大屏可视化案例,经历了设计师和产品经理的各种 "指指点点" ,也算是对可视化大屏项目有了一点点小的经验,对于两个技术栈写组件也有一 ...
移动端、后台管理、大屏可视化等项目rem适配（postcss-pxtorem、amfe-flexible）。已自测
vue项目使用element-ui框架Rem适配(postcss-pxtorem.amfe-flexible)的安装使用. 移动端.后台管理.大屏可视化等类型项目皆适用,均已自测. 分步指南 1.安装 ...
Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
这几天在做大屏项目的屏幕适配. 看到别人提到过使用flexible.js可以完成大屏的适配.我也尝试了一下,但是并没有成功. 参考了一下别人的项目的适配. 简单描述一下这个适配大屏代码的思路,主要通过 ...
前端基础第二天项目大数据大屏可视化项目
大数据大屏可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引 ...
web大屏展示用到的组件_基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
pyecharts 大屏可视化学习
@pyecharts 大屏可视化学习,记录,总结先看看效果图表代码都是官网直接复制的,主要是为了学习方法,学习到底如何大屏布局. 参考学习 1.https://blog.csdn.net/bo_g ...
html大屏可视化边框怎么弄的,做大屏可视化，你需要知道这几点
看别人家的大屏做得直观又好看,自己也想做,那么自己做大屏可视化难吗?其实还真不算难,只要有BI数据可视化工具,你就能自由发挥,制作有个性又直观的大屏可视化报表.但简单归简单,有些该注意的事项还是得注意 ...
vue大屏可视化自适应完美方案
背景在做大屏可视化项目的时候,一般设计稿会设计成1920*1080,但是页面写死1920*1080在2k.4k等分辨率的屏幕下是不适配的.如果页面能够根据屏幕比例进行等比缩放那就好了. 比例什么? ...

大屏可视化之适配和布局

前言

适配大屏

布局

大屏可视化之适配和布局相关推荐

最新文章

热门文章