vue数据大屏自适应屏幕分辨率js
2024-05-10 03:15:12
vue数据大屏自适应屏幕分辨率js
最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题，按照设计图的百分比写感觉太麻烦，宽高甚至字体大小都要用百分比，就在想有没有其他的方案能实现，相信都用过rem单位，此篇是就rem自适应屏幕分辨率写出js
当然也参考了别人的文档，融合之后变成自认为最好用的一个版本
下面是js代码
;
(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content');if (content) {var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {dpr = 2;} else {dpr = 1;}} else {// 其他设备下，仍旧使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute('data-dpr', dpr);if (!metaEl) {metaEl = doc.createElement('meta');metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem() {var width = docEl.getBoundingClientRect().width;if (width / dpr > 1920) {// 这个位置划重点 1920是设计稿的大小 如果你的设计稿是750 那么就需要将1920替换成750width = (docEl.clientWidth / 1920) * 1920;}var rem = width / 10;docEl.style.fontSize = rem + "px";flexible.rem = win.rem = rem;}win.addEventListener('resize', function() {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function(e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function(d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}flexible.px2rem = function(d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}})(window, window['lib'] || (window['lib'] = {}));
简单分析这个js就是将屏幕分辨率分成10份，1920的就是一份192，2560的一份就是256，按照分辨率的1/10定1rem等于多少px
现在js文件已经有了，我是在开发一半的时候发现自适应这个问题，因为我的设计稿是1920的，已经按照px定死了，再从头回去按照rem调整不现实，所以就此说一下我的开发思路
- 按照设计稿的尺寸正常开发，单位就按照px写
- 在utils文件夹里面新建flexible.js，js里面的内容就是上面的代码
- 在main.js里面引入flexible.js
- 我是用的vscode开发的，下载vscode插件 px to rem，并按照设计稿的尺寸分成10份就是要设置的1rem等于多少px，我的设计稿是1920，所以就是192 如下图：
- 规定好之后，进入到css文件，ctrl+A全选，使用px to rem快捷键 Alt+Z，会自动将所有的px单位换算成对应的rem单位
到这里就已经结束了，可以自己随意调试，不过这个方案仅限于分辨率不是特别怪异的，如果分辨率是3840*1080，这个方案就不适用了，如果有小伙伴有其他方案也可以浏览探讨，互相进步
vue数据大屏自适应屏幕分辨率js相关推荐
- 大屏项目屏幕分辨率适配
一.大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160 二.css方案选择:css的宽高以什么为单位? 1.字体大小以 "相对单 ...
- 爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
前言 近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况,大部分原因还是适配问题. 我们做数据大屏时,因为显示器尺寸不同,会导致展示的时候有留白区域,效果不好,所 ...
- vue 数据大屏使用数字字体
一.下载数字字体 二.转换字体 三.引入项目 一.下载数字字体 下载地址:https://www.dafont.com/theme.php?cat=302&text=0123456789 字体 ...
- 基于Echarts实现可视化数据大屏3D文字效果js插件
前言
- Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍 实验介绍 在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
- 【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 =＞ 使用transform:scale =＞ 组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录 一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示 二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
- Three.js + React + Echart(折线图 光线流动效果，柱状图数据动态更新动画) + Svga-Web应用之数据大屏(适配1920*1080 2560*1440 3840*2160)
Web应用之数据大屏 一.技术栈 React 17.0.0 搭建脚手架 Eahcrt常规图表 Svga动画 3D模型-Three.Js 大屏适配-目标大屏(4K -3840*2160) 二.React ...
- 可视化大屏设计尺寸_Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)
最近在用VUE写大屏页面,遇到屏幕自适应问题,根据设计的尺寸,在各种屏幕尺寸下自适应,保持显示比例不变,经过几天摸索,终于达到了效果,希望为还在这问题困扰的提供点帮助 铺满全屏效果见Vue 大屏可视化 ...
- 数据大屏项目Vue+DataV+Echarts(附源码)
一.项目描述 1 前端项目 1.1 项目简介 一个基于 Vue.datav.Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替 ...
最新文章
- eclipse jsp 写 js 代码提示_基于jsp+servlet的宠物管理系统
- gradle文件不识别_识别Gradle约定
- 外媒：台积电准备明年下半年采用3nm工艺为苹果生产芯片
- 使用Dom4j的xPath解析xml文件------xpath语法
- Axure RP9快捷键
- CentOS安装NPM
- 小米8 twrp recovery_小米max3一键刷入TWRP recovery 刷机教程
- html 倒计时毫秒,实现毫秒级倒计时
- 看雪CTF.TSRC 2018 团队赛 第二题 半加器 writeup
- Codeforces #319E: Ping-Pong 题解
- android 智能手环应用,戴图智能手环app(健康手环应用) 1.7.8安卓版
- c++通讯录管理系统（函数，指针，结构体）
- shell脚本之正则表达式
- 我在CSDN的第一篇博客——js实现简单计算器
- java常见的设计模式
- （已解决）ubuntu16.04 Nvidia驱动安装成功却无法检测到外接显示器
- Python在Windows下输出响铃【内容已更新】
- PLC之六部十层电梯整体框架
- win10怎么还原系统【系统天地】
- 【CodeQL从入门到精通系列】01-CodeQL简介