vue大屏数据可视化自适应,vue页面自适应屏幕分辨率
这篇文章主要为大家详细介绍了某视频剪辑软件实现大屏页面的屏幕自适应，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现大屏页面的屏幕自适应的具体代码，供大家参考，具体内容如下
1.在配置文件设置大屏设计的尺寸1920*1080
//appConfig.js
导出默认值{
屏幕：{
宽度：1920年，
身高：1080,
比例：20
}//大屏设计宽高
}
2.定义resetScreenSize.js
从导入读取配置文件./config/base
导出函数页面大小(回调){
让init=()={
console.log(window.innerHeight ， window。内部宽度)；
let _ El=文档。getelementbyid( app )；
设h比例=窗口。内部高度/appconfig。屏幕。身高；
设w比例=窗口。内部宽度/appconfig。屏幕。宽度；
let pageH=window.innerHeight
let pageW=window.innerWidth
设更宽=(窗口。内部宽度/窗口。内部高度)=(appconfig。屏幕。宽度/appconfig。屏幕。身高)；
控制台。原木(较宽)；
如果(isWider) {
_ El。风格。高度=窗口。内部高度 px ；//100%;
_ El。风格。width=pageH * appconfig。屏幕。宽度/appconfig。屏幕。高度 px ；
_ El。风格。top= 0px
_ El。风格。left=(窗口。内部宽度-pageH * appconfig。屏幕。宽度/appconfig。屏幕。高度)* 0.5 px
console.log(_el.style.width ， _el.style.height)
}
否则{
_ El。风格。宽度=窗口。内部宽度 px ；//100%;
_ El。风格。height=pageW * appconfig。屏幕。高度/appconfig。屏幕。宽度 px ；
_ El。风格。top=0.5 *(窗口。内部高度-pageW * appconfig。屏幕。高度/appconfig。屏幕。宽度)“px”；
_ El。风格。left= 0px
控制台。log(_ El。风格。身高)；
控制台。log(_ El。风格。顶)；
}
文档。文档元素。风格。font size=(_ El。客户端宽度/appconfig。屏幕。scale) px ；
}
窗口中的var resize evt=方向改变？方向改变":"调整大小；
窗户。addevent listener(resize evt，init，false)；
文档。文档元素。addevent侦听器( DOMContentLoaded ，init，false)；
初始化()
}
3使用方式
主页。射流研究…引入
从""导入appConfig ./config/base。js’；
vue。原型。appConfig=appConfig
应用程序.某视频剪辑软件在安装好的函数引入
从导入{pageResize} ./utils/resetScreenSize
导出默认值{
名称："应用程序",
data(){
返回{
}
},
已安装(){
页面大小调整()；
控制台。日志(“调整页面大小”)；
}
}
组件中样式lang=stylus 。mc{
显示器：flex
伸缩方向：列；
对齐内容：居中；
对齐-内容：居中；
显示器：flex
弹性：1 1自动；
伸缩方向：列；
填充：(15/96)雷姆；
}。leftC{
宽度：(410/96)雷姆；
}。中心C{
宽度：(1060/96)雷姆；
}。rightC{
宽度：(450/96)雷姆；
}
其中96为配置文件中1920/20得来，这样不用在进行各种换算了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。