Vue大屏页面屏幕自适应

1.在配置文件设置大屏设计的尺寸1920*1080

//appConfig.js
export default{screen:{width:1920,height:1080,scale:20}//大屏设计宽高
}

2.定义resetScreenSize.js

import appConfig from '../config/base'
export function pageResize(callback) {let init = () => {console.log(window.innerHeight + "," + window.innerWidth);    let _el = document.getElementById('app');let hScale = window.innerHeight / appConfig.screen.height;let wScale = window.innerWidth / appConfig.screen.width;let pageH = window.innerHeight;let pageW = window.innerWidth;let isWider = (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height);console.log(isWider);if (isWider) {_el.style.height = window.innerHeight+'px';// '100%';_el.style.width = pageH * appConfig.screen.width / appConfig.screen.height + 'px';_el.style.top='0px';_el.style.left=(window.innerWidth -pageH * appConfig.screen.width / appConfig.screen.height)*0.5+'px';console.log(_el.style.width + "," + _el.style.height)}else {_el.style.width = window.innerWidth+'px';// '100%';_el.style.height = pageW * appConfig.screen.height / appConfig.screen.width + 'px';_el.style.top= 0.5*(window.innerHeight-pageW * appConfig.screen.height / appConfig.screen.width)+'px';_el.style.left='0px';console.log(_el.style.height);console.log(_el.style.top);}document.documentElement.style.fontSize =  (_el.clientWidth / appConfig.screen.scale) + 'px';}    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';window.addEventListener(resizeEvt, init, false);document.documentElement.addEventListener('DOMContentLoaded', init, false);init()
}

3.使用方式
main.js 引入

import appConfig from './config/base.js';
Vue.prototype.appConfig=appConfig;
app.Vue  在mounted函数引入import  {pageResize} from './utils/resetScreenSize'export default {name: 'App',data(){return{}},mounted(){pageResize();console.log('pageResize');}
}

4.组件中样式

.mc{display :flex;flex-direction :column;align-content :center;justify-content :center;  display: flex;flex: 1 1 auto;flex-direction: column;padding:(15/96)rem;}.leftC{width :(410/96)rem;}.centerC{width :(1060/96)rem;}.rightC{width :(450/96)rem;}

其中 96为配置文件中1920/20得来，这样不用在进行各种换算了

Vue大屏页面屏幕自适应相关推荐

可视化大屏设计尺寸_Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)
最近在用VUE写大屏页面,遇到屏幕自适应问题,根据设计的尺寸,在各种屏幕尺寸下自适应,保持显示比例不变,经过几天摸索,终于达到了效果,希望为还在这问题困扰的提供点帮助铺满全屏效果见Vue 大屏可视化 ...
vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
大屏页面能够在大屏和电脑自适应
5760*2160是大屏比例,原型设计按照这个开发(<body style="width:5760px;height:2160px">),如果通过zoom方式修改,只能 ...
前端大屏页面布局经验
前端大屏页面布局经验额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的. 分辨率首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓 ...
大屏页面使用transform属性scale进行缩放，高德地图点击事件失效，地图展示模糊
这里写自定义目录标题大屏页面使用transform属性scale进行缩放,高德地图点击事件失效,地图展示模糊 1.大屏缩放自适应时使用tansform scale 缩放 1.1.window.res ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
大屏项目屏幕分辨率适配
一.大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160 二.css方案选择:css的宽高以什么为单位? 1.字体大小以 "相对单 ...
vue 大屏数字上下滚动
vue 大屏数字上下滚动效果就是有数字变动时,会有一个动画跳到相应的数字,是上下滚动的那种. <div class="chartNum"><div class= ...
Vue大屏可视化DataV组件库
前言最近需要做一个 Vue大屏数据可视化的项目,找资料的时候发现一个很棒的 vue大屏数据可视化插件DataV组件库,可使我们大屏看起来更高端. DataV介绍网站链接:http://datav. ...

Vue大屏页面屏幕自适应

Vue大屏页面屏幕自适应相关推荐

最新文章

热门文章