Vue实现大屏页面的屏幕自适应
本文实例为大家分享了Vue实现大屏页面的屏幕自适应的具体代码，供大家参考，具体内容如下 1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 }//大屏设计宽高 } 2. 定义resetScreenSize.js import appConfig from '../config/base' export functio
### Vue实现大屏页面的屏幕自适应
#### 知识点概述
在现代Web开发中，屏幕自适应是一项重要的技术，特别是在大屏显示环境中尤为重要。本文档将详细讲解如何使用Vue框架来实现大屏页面的屏幕自适应功能，并提供具体的代码示例与实践指导。
#### 设置大屏设计尺寸
为了确保页面能够在不同大小的大屏上正确显示，我们需要在项目的配置文件中设置一个基准的设计尺寸。这通常涉及到宽度、高度以及可能的缩放比例等参数。
##### 配置文件示例：`appConfig.js`
```javascript
// appConfig.js
export default {
screen: {
width: 1920, // 设计宽度
height: 1080, // 设计高度
scale: 20 // 基准缩放比例
} // 大屏设计宽高
}
```
在这个示例中，我们设定了大屏的基本尺寸为1920×1080像素，同时指定了一个基准缩放比例为20。这意味着我们的设计元素将基于这个比例进行缩放，以适应不同大小的屏幕。
#### 定义屏幕尺寸重置逻辑
接下来，我们需要编写一个用于根据当前屏幕尺寸动态调整页面布局的函数。该函数通常会监听窗口的大小变化，并据此更新页面的样式属性。
##### `resetScreenSize.js` 示例代码
```javascript
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);
if (isWider) {
_el.style.height = window.innerHeight + 'px';
_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';
} else {
_el.style.width = window.innerWidth + 'px';
_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';
}
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();
}
```
在这个示例中，我们定义了一个名为`pageResize`的函数，它负责根据当前屏幕的尺寸调整页面的宽度、高度以及位置等属性。此外，还通过监听窗口的`resize`事件（或`orientationchange`事件），确保当屏幕尺寸发生变化时能够及时地更新页面布局。
#### 使用方式
我们还需要在项目的主要入口文件中引入并使用这些配置和功能。
##### `main.js` 示例
```javascript
import appConfig from './config/base.js';
Vue.prototype.appConfig = appConfig;
// 在Vue实例的mounted钩子中调用
import { pageResize } from './utils/resetScreenSize';
export default {
name: 'App',
data() {
return {};
},
mounted() {
pageResize();
console.log('pageResize');
}
};
```
在上述示例中，我们首先将`appConfig`对象挂载到Vue原型上，使得所有Vue组件都可以访问到这个配置。接着，在`main.js`文件中，我们在Vue实例的`mounted`钩子中调用了`pageResize`函数，以此来初始化页面布局的自适应功能。
#### 组件中样式处理
为了进一步优化大屏显示效果，我们还可以在组件的样式中使用特定的单位，例如：
```stylus
.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; // 使用相对单位以增强自适应性
}
```
这里使用了Stylus语法来定义组件的样式，并采用了相对单位（如`rem`），以增强组件在不同屏幕尺寸下的适应能力。
#### 结论
通过合理配置和编写相关代码，我们可以利用Vue框架轻松实现大屏页面的屏幕自适应功能。这种方法不仅能够确保页面在各种尺寸的大屏上都能呈现出良好的视觉效果，还能提高用户体验，使用户无论在何种设备上都能获得一致且流畅的浏览体验。
