大屏自适应之前有用过postcss-pxtorem之类的插件，但是插件只针对css样式，在js和vue模板中的样式，还有echarts的属性值都不能经过插件直接转换。要手动分装方法再次调用，就会比较麻烦，而且有时候写着写着就忘加了，开发就一个分辨率的显示器，最多就是f12打开挤兑挤兑测测。

解决方案 ------- 缩放 + scrollbar（非全屏）

可以使用transform: scale(${this.scale})来设置当前屏幕的缩放比例，以视觉稿为基数1，等比例缩放页面。一般来说大屏设计都是1920*1080的大小，但是浏览器的地址栏标签栏等会占掉一定的高度，所以不是全屏的时候，是显示不全的。所以当比这个比例小的时候，增加竖向滚动条，当全屏的时候，就是正常显示。有些大屏可能还会内嵌到其他框架里边，也可以给大屏增加全屏按钮。

非全屏：出滚动条，全屏：正常显示
内嵌进其他框架，比如qiankun框架，可以给大屏自己增加全屏和取消全屏按钮，而不是使用键盘的f11

目前的问题：
1. 缩放css属性没有设置在body上，而是在body的子标签上，所以对于一些自动插入到body的元素，缩放不生效（可以试试直接将缩放属性设置在body上，因为这个问题是我用的时候才遇到的，还莫得时间去改）
2. 放大2倍之后，echarts可能看着有点糊。。。。。。。。。没有在特别大的屏上试过，只是有个功能正好做了点击再放大2倍图表，看着是有点糊。。。。。

vue2

这里我使用了ResizeObserverIns来监听dom的变化，也可以使用window的resize方法

<template><div class="page-screen" ref="fullScreen"><el-scrollbar><div class="bg" :style="computedStyle">...</div></el-scrollbar></div>
</template>
<script>
let ResizeObserverIns = null
export default {data() {return {scale: 1}},computed: {computedStyle() {return {transform: `scale(${this.scale})`,'transform-origin': '0 0',}},},mounted() {this.screenResize()ResizeObserverIns = new ResizeObserver(() => {this.screenResize()})ResizeObserverIns.observe(this.$refs.fullScreen)},beforeDestroy() {ResizeObserverIns && ResizeObserverIns.disconnect()},methods: {screenResize() {this.scale = this.$refs.fullScreen.offsetWidth / 1920},}
}
</script>
<style lang="scss" scoped>
.page-screen {width: 100%;height: 100%;background: rgb(4, 16, 44);overflow: hidden;::v-deep .el-scrollbar__wrap{height: calc(100% + 10px);}::v-deep .el-scrollbar__view {height: 100%;}
}
.bg {width: 1920px;height: 1080px;// background-image: url('@/assets/bg.png'); // 一般大屏会有背景background-position: center center;background-repeat: no-repeat;background-size: cover;overflow: hidden;position: relative;
}

vue3

vue3只是在script写法上与vue2不一样

import { computed, ref, onMounted } from 'vue'
import { throttle } from '@/utils'
import { useScaleStore } from '@/store/scale'  // 这个是pinia全局存值，类似vuex，没有用到可以忽略
const store = useScaleStore()
let ResizeObserverIns = null
let scale = ref(1)
let fullScreen = ref()
const computedStyle = computed(() => {return {transform: `scale(${scale.value})`,'transform-origin': '0 0'}
})
onMounted(() => {screenResize()ResizeObserverIns = new ResizeObserver(() => {screenResize()})ResizeObserverIns.observe(fullScreen.value)
})
const screenResize = throttle(function () {  // 增加节流，之前vue2上项目比较赶，后来也懒得加scale.value = fullScreen.value.offsetWidth / 1920store.changeScale(scale.value)
}, 60)

全屏 / 取消全屏

screenClick() {const fullarea = this.$refs.fullScreenif (this.fullScreen) {cancelScreen()} else {fullScreen(fullarea)}this.fullScreen = !this.fullScreen}
// 工具方法
// 全屏
export const fullScreen = (fullarea) => {if (fullarea.requestFullscreen) {fullarea.requestFullscreen();} else if (fullarea.webkitRequestFullScreen) {fullarea.webkitRequestFullScreen();} else if (fullarea.mozRequestFullScreen) {fullarea.mozRequestFullScreen();} else if (fullarea.msRequestFullscreen) {// IE11fullarea.msRequestFullscreen();}
}
// 取消全屏
export const cancelScreen = () => {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}
}

总结

大屏方案现在使用下来还是scale好用，写代码的时候完全不用操心，而且其他人写的时候也不会出问题

大屏自适应方案之scale相关推荐

css 网页自适应方案大屏自适应方案
自适应需要解决的问题屏幕像素大小不同,统一表现画面比例不同,统一表现浏览器字体最小限制,不可能无限等比缩小自适应不成功的表现: 4. 画面出现拉伸压缩 5. 文字内容显示异常 6. 画面出现空 ...
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞大屏自适应缩放解决方案 =＞使用transform:scale =＞组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
vue项目：大屏自适应解决方案（两种）
css缩放方案: 利用transform:scale 进行适配推荐使用v-scale-screen 值得注意的是: vue 2.6.2.7 要使用 npm install v-scale-scree ...
vue数据大屏自适应屏幕分辨率js
vue数据大屏自适应屏幕分辨率js 最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题,按照设计图的百分比写感觉太麻烦,宽高甚至字体大小都要用百分比,就在想有没有其他的方案能实现,相信都用过rem ...
PowerBI 秒级实时大屏展示方案全面助力双十一
双十一来了,你准备好了吗?不管你是否准备完毕,我们带来了全网首发的 PowerBI 秒级实时大屏展示方案,你可以直接用来展示双十一的实时状况. 我们一步步来说明这个套件模板教程. 真实效果功能如下: ...
基于HTML5的iPad电子杂志横竖屏自适应方案
基于HTML5的iPad电子杂志横竖屏自适应方案 (转载自:http://www.yeeach.com/?p=1172) 基于HTML5来制作iPad电子杂志,横屏及竖屏自适应是个大问题,查找了半 ...
transform:scale实现大屏自适应
小结一波~ 前言大屏使用rem 耗时而且对浏览器最小字体不支持,使用transform:scale可以节省百分之九十工作量且保证页面宽高在任何情况下等比例缩放一.使用步骤 1.在src文件下的u ...
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言当接到可视化大屏需求时,你是否会有以下疑问

大屏自适应方案之scale

解决方案 ------- 缩放 + scrollbar（非全屏）

vue2

vue3

全屏 / 取消全屏

总结

大屏自适应方案之scale相关推荐

最新文章

热门文章