前端可视化大屏适配方案
前端可视化大屏适配方案
目录
1.大屏适配的要求(普遍)
2.可用技术
3.使用
第一步, src目录下utils文件下新建drawMixin.js文件,将以下代码粘贴进去
第二步,在根组件如app.vue或index.vue文件(页面最外层的标签)写入以下代码
第三步,设置根标签的样式
局限性:
效果图:
浏览器25%下全屏视角,横向、纵向无滚动条,在25%~500%下页面是一样的。
1.大屏适配的要求(普遍)
第一点,横向、纵向不可出现滚动条
第二点,可全屏(就是F11全屏模式)
第三点,不论在多大的屏幕中显示,页面不可变形,最好是肉眼看不出任何问题
2.可用技术、
1.强推css3的 scale进行适配,原理其实很简单,就是我们假设按照1920×1080的设计图正常使用px单位去写页面,然后当页面变化时,使用scale动态的放大或者缩小2.rem适配,没啥好说的,用淘宝的那个即可
3.flex适配
4.百分比适配
3.使用
使用其实很简单,共分三步
第一步, src目录下utils文件下新建drawMixin.js文件,将以下代码粘贴进去
// 屏幕适配 mixin 函数
// * 默认缩放值
const scale = {
width: '1',
height: '1',
}
// * 设计稿尺寸(px)
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例(默认1.77778)
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
export default {
data() {
return {
// * 定时函数
drawTiming: null
}
},
mounted () {
this.calcRate()
window.addEventListener('resize', this.resize)
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
},
methods: {
calcRate () {
const appRef = this.$refs["appRef"]
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
} else {
// 表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
}
}
},
resize () {
clearTimeout(this.drawTiming)
this.drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
},
}
第二步,在根组件如app.vue或index.vue文件(页面最外层的标签)写入以下代码
我用的是mixin混入,如果不想这么搞,可以按部就班的把drawMixin.js里面的数据放在该放的位置上即可
<div id="index" ref="appRef"> //加一个ref
import drawMixin from "../utils/drawMixin"
export default {
mixins: [drawMixin],
data () {
return {
}
}}
第三步,设置根标签的样式
这一步很重要,具体标签名根据自己项目来,就是页面居中,脱离文档流,加一个溢出隐藏,就不会出现滚动条了。
#app {
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
overflow: hidden;
}
局限性:
scale非常适合可视化,我想着能不能用于正常的pc端页面呢?我做了几个实验,有rem适配的不适合,用px写的普通项目到也行,可是有一个非常难以解决的问题,那就是滚动条,除了可视化项目,普通的项目可是有滚动条的,将这个方法应用后,直接炸了。
更多推荐
所有评论(0)