解决 “数据大屏“ 展示的屏幕适配问题

现在非常流行的大数据可视化方案，不过要做数据大屏有一个很重要的问题就是屏幕适配。

一、引入flexible文件
flexible是移动端屏幕适配非常著名的的插件，能够帮助我们修改rem的值，也就是修改html标签下font-size的值。
例：下载flexible.js文件并放在common目录下，然后在vue-cli中的main.js主配置文件中引入

// 适配flex，文件放在src/common目录下
import "@/common/flexible.js";

二、修改文件
假设我的模板是按照1920px的尺寸来写的，那么我们首先需要去flexible.js文件下修改它所缩放的尺寸间距如：最小1366px，最大适配2560px，并且比例设置成24等份，设计稿是1920px，这样1rem就是80px。

function refreshRem() {var width = docEl.getBoundingClientRect().width;// 最小1366px，最大适配2560pxif (width / dpr < 1366) {width = 1366 * dpr;} else if (width / dpr > 2560) {width = 2560 * dpr;}// 设置成24等份，设计稿时1920px的，这样1rem就是80pxvar rem = width / 24;docEl.style.fontSize = rem + "px";flexible.rem = win.rem = rem;}

三、借助插件自动计算rem

以vscode为例

设置比例，前面说了，我们按照1920px切成了24份，那么一份就是80px

这样我们在写的时候就会自动计算比例

解决 “数据大屏“ 展示的屏幕适配问题相关推荐

基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...
安徽合肥芜湖数字孪生智慧工厂,工厂车间数字化三维仿真交互,3d可视化数据大屏展示系统
安徽合肥芜湖数字孪生智慧工厂,工厂车间数字化三维仿真交互,3d可视化数据大屏展示系统.在数字化时代,传统的工业企业数字化转型迫在眉睫.在宝钢智能化升级项目中,引入了数字孪生这个概念,对工业生产全过程进 ...
基于Java开发的数据大屏展示程序
数据大屏开发文档一.开发目标本程序为一块不停刷新数据的大屏幕的Java后台程序.前端5分钟刷新一次,需要向后台接口请求数据展示到前段. 二.程序架构程序框架:Spring Boot.Myba ...
使用vue3实现数据大屏展示
1.前提有后端数据接口和数据库,并且能够使用axios访问接口获取数据 2.安装依赖包 npm i vue-router echarts axios less vue-router,我们有多个页面进 ...
JavaScript、Vue实现大数据大屏展示3D旋转动画效果
效果最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到 ...
基于VUE + Echarts 实现可视化数据大屏展示效果
中国(寿光)国际蔬菜科技博览会智慧农业系统 - LED拼接屏展示前端开发文档上线后呈现效果: 一.开发需求及方案制定 1.确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11 ...
【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面
这是我们最终想要达到的效果,并且支持任意宽高缩放不变形.注意哟这次不一样的是有透明度! 开始准备物料第一步:切片,建议用九宫格的形式,切割有考究,主要是最大限度.最小尺寸囊括多个边界转角处的样式(亮 ...
thinkphp5+数据大屏展示效果
1控制器代码展示: 控制器代码: // 加载页面后输出的数据public function index(){ $data = Db::name('index')->limit(5)->se ...
基于Echarts+HTML5可视化数据大屏展示—Echart图例使用

解决 “数据大屏“ 展示的屏幕适配问题

解决 “数据大屏“ 展示的屏幕适配问题相关推荐

最新文章

热门文章