大屏设计方案
Posted 折桂怀橘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大屏设计方案相关的知识，希望对你有一定的参考价值。
大屏设计方案
一、非等比放大(填充满整个屏幕)
目的屏幕比例大小和设计稿的差的不多
相差不多的话也可以如下取rem，不同点不用根据rem 设置外层layout的，宽度直接用100vw,高用100vw，整体布局分布用百分比设置高度宽度，中间用flex=1撑开，再里面的布局用流体式。
目的屏幕比例大小和设计稿的差很多
这就很麻烦，但是也得设置放大比例，一般以宽度为基准 如下获取rem,宽度直接用100vw,高用100vw，整体布局就得用流体布局。
二、等比放大（比如16：9）
理想中的效果，当屏幕的尺寸比例刚好是16：9时，页面能刚好全屏展示，内容占满显示器，但是如果屏幕过长或者过宽的情况也要保持16：9的情况的话，就会出现一下的如下情况
解决方案
使用rem 毋庸置疑的
首先木伦是vue 还是react 我们都有html 文件直接在html文件下的script标签下直接监听目前屏幕的大小，例如我们要求就是16/9，我们获取目前的屏幕的宽高比
如果宽高比大于目前的16/9 就说明过宽了，那么就用高度为基准求目前的rem。
比如原比例的默认字号 1rem = 16px
那就是 1rem = 目前的高/1920 ×16
如果宽高比小于目前的16/9 就说明过高了，那么就用宽度为基准求目前的rem。
比如原比例的默认字号 1rem = 16px
那就是 1rem = 目前的宽/1080 ×16
document.documentElement.clientWidth
获取浏览器窗口文档显示区域的宽度，不包括滚动条。
document.documentElement.clientHeight
获取浏览器窗口文档显示区域的高度，不包括滚动条。
<script>
window.addEventListener("resize", function (e)
let currenWidth = document.documentElement.clientWidth;
let currenHeight = document.documentElement.clientHeight;
let scale = 16 / 9 // 设计稿比例
if (currenWidth / currenHeight < 16 / 9)
// 显示的宽度就是整屏幕宽度
// 过高 以宽度为基准等比例放大 1920 设计稿宽 设计稿基本字体就是16px
document.documentElement.style.fontSize = currenWidth / 1920 * 16 + 'px'
else
// 显示的高度就是整屏幕高度
// 过宽 以高度为基准等比例放大
document.documentElement.style.fontSize = currenHeight / 1080 * 16 + 'px'
, false);
那么外层layout的宽高设置多高？
1920 *1080 — 16px
那么 宽度就是 fontSize × （1920/16）
高度 fontSize × （1080 /16)
设置后 控制台就可以看到变化的font-size
之后就可以用rem了，有两种便利的方式：
1、VsCode安装cssrem插件实现px转rem，推荐这种，自己在编写代码的时候就应用上rem 不再用px
2. postcss-pxtorem 插件 可看这里
也可以用@media 根据不同的屏幕的大小来设定 rem
(min-width: 375px)
html
font-size: 100px;
整理全网最全大屏，可视化大屏，可视化方案，可视化参考，报表，大屏设计，大屏资源，大屏学习，高保真大屏
整理全网最全大屏设计资源，包括各类智慧大屏，axure高保真大屏原型，大屏设计参考思路，大屏设计可视化图片，如何学习设计大屏等。
Gitee仓库地址：https://gitee.com/AiShiYuShiJiePingXing/bigscreen
克隆：git clone https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
一、大屏设计资源
草木交易
大屏设计参考手册
大屏效果图片
大屏入口屏-主屏
大数据分析系统
企业、物流
食物
收费站
数字孪生
物流大数据
舆情分析
智慧城市
智慧高速
智慧公交
智慧交通
智慧社区
大数据可视化平台
登录界面
视频监控
数字孪生
移动能效
智慧仓库
智慧城市
智慧电商
智慧工地
智慧公安
智慧公司
智慧环保
智慧交通
智慧金融
智慧景区
智慧金融
智慧矿产
智慧企业
智慧气象
智慧设备
智慧社区
智慧市场
智慧图书
智慧网络
智慧物联
智慧物流
智慧消防
智慧销售
智慧医疗
智慧运维
智慧运营
智慧政务
GIS大屏
axure高保真大屏原型
二、个人收藏的花瓣大屏图片
地址：https://huaban.com/boards/37969129/
地址：https://huaban.com/boards/71659253/
附录A：优秀大屏参考案例
大屏HTML
http://yuanbaoshuju.com/preview.html
DataGear大屏看板模板
Gitee地址：DataGearDashboardTemplate
静态大屏HTML模板，可作为看板模板导入DataGear数据可视化分析平台，制作大屏展示数据可视化看板。
DataGear是一款数据可视化分析平台，使用Java语言开发，采用浏览器/服务器架构，支持SQL、CSV、Excel、HTTP接口、JSON等多种数据源， 主要功能包括数据管理、SQL工作台、数据导入/导出、数据集管理、图表管理、看板管理等。
官网地址：
http://www.datagear.tech
源码地址：
https://gitee.com/datagear/datagear
https://github.com/datageartech/datagear
模板参考项目
特种设备综合监管大屏
介绍：
数据可视化大屏-特种设备综合监管 压力容器
https://blog.csdn.net/yue31313/article/details/90813821
1、集成高德地图 地理信息系统（GIS）。显示图标点、点击显示弹窗。更改地图主题背景色。街道。复选框，筛选切换显示类型状态。
2、echarts图表。地图。占比统计。
3、数据转换成图表所用数据，代码逻辑优化。提高数据生成图表开发效率。
源码下载：
https://gitee.com/han_meng_fei_sha/TeZhongSheBeiZongHeJianGuanDaPing/tree/master
Echarts电商平台数据可视化大屏
Echarts电商平台数据可视化大屏全栈实战项目分享（附源码）：https://juejin.cn/post/6960125126008389669
Vue全家桶、WebSocket前后端数据推送、后端框架Koa2、Echarts新版图表组件（折线图、柱状图、饼图、地图、散点图），还支持主题切换, 展示酷炫的图表效果，同时也能够支持大屏和小屏的切换，保证了图表在不同屏幕上呈现的效果。
在线DEMO演示：http://106.55.168.13:8999/screen
附录B：相关资源内容来源及整理
资源来源：
以上是关于大屏设计方案的主要内容，如果未能解决你的问题，请参考以下文章