大屏适配之v-scale-screen

需求背景

最近开发的一个C端项目，设计给的设计稿是1920*1080的，开发过程中也是按照这个来布局，完成后发现客户使用电脑过程中会用到不同的分辨率以及各样的缩放比，导致项目显示效果不太理想，为了解决这个问题，用到了 v-scale-screen组件 进行设配

v-scale-screen组件介绍

v-scale-screen 是一个专为大屏项目开发设计的大屏适配容器组件，能实现屏幕的自适应，支持 Vue2.6 及以上版本。以下是关于分辨率兼容和 v-scale-screen 的详细介绍：

v-scale-screen 的原理和特点

• 原理：通过 css transform 实现缩放效果，利用网页宽高比动态缩放网页，同时支持铺满全屏、宽高等比、高度等比 等自适应方案。
• 特点：

1. 强大的自适应能力：支持根据宽度、高度和宽高比进行自适应。
2. 兼容性好：支持 Vue3 及以上版本，同时也兼容 Vue2.7 和 Vue2.6 版本。
3. 丰富的配置选项：提供多种配置选项，如全屏自适应、延迟时间、容器样式等。
4. 简单易用：安装简便，使用方便，只需几行代码即可实现大屏适配。

• v-scale-screen 的配置项

属性	说明	类型	默认值
width	大屏宽度	Number or String	1920
height	大屏高度	Number or String	1080
autoScale	自适应配置，配置为 boolean 类型时，为启动或者关闭自适应，配置为对象时，若 x 为 true，x 轴产生边距，y 为 true 时，y 轴产生边距，启用 fullScreen 时此配置失效	Boolean or {x:boolean,y:boolean}	true
delay	窗口变化防抖延迟时间	Number or String	500
fullScreen	全屏自适应，启用此配置项时会存在拉伸效果，同时 autoScale 失效，非必要情况下不建议开启	Boolean	false
boxStyle	修改容器样式，如居中展示时侧边背景色，符合 Vue 双向绑定 style 标准格式	Object	null
wrapperStyle	修改自适应区域样式，符合 Vue 双向绑定 style 标准格式	Object	null
bodyOverflowHidden	启用后 body 的样式会自动设置为 overflow: hidden	Boolean	true

• v-scale-screen 的使用方法

1. 安装依赖：

• Vue2 请使用 v-scale-screen@1.0.0 版本，Vue3 请使用 v-scale-screen@2.0.0 版本。
• npm install v-scale-screen -save
• yarn add v-scale-screen

2. 在 main 中引入：

• Vue2：

// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

• Vue3：

// main.js
import VScaleScreen from 'v-scale-screen'
export default {
  components:{
    VScaleScreen
  }
}

3. 使用组件：

html
<v-scale-screen width="1920" height="1080">
  <!-- 页面具体业务逻辑 -->
</v-scale-screen>

v-scale-screen 的性能表现较为出色，主要体现在以下几个方面：

• 高效的自适应调整：v-scale-screen 通过 css transform 实现缩放效果，利用网页宽高比动态缩放网页，能根据屏幕的宽度、高度以及宽高比进行高效的自适应调整。在不同分辨率的屏幕上，它可以快速准确地对页面内容进行适配，确保内容在大屏上完美展示，避免了因屏幕尺寸变化而导致的布局混乱和内容显示不完整等问题。
• 避免频繁调整：该组件支持窗口大小调整的延迟时间设置，通过设置合理的延迟时间，避免了因窗口频繁调整而导致的性能问题。这意味着在用户调整窗口大小时，v-scale-screen 不会立即进行调整，而是等待一段时间，以确保用户完成调整操作后再进行适配，从而减少了不必要的重绘和计算，提高了性能。
• 低资源占用：v-scale-screen 在实现屏幕适配的过程中，对系统资源的占用相对较低。它采用了优化的算法和技术，减少了对浏览器性能的影响，不会导致页面加载速度过慢或出现卡顿现象。即使在处理复杂的大屏项目时，也能够保持较好的性能表现，确保用户体验的流畅性。
• 兼容性好：v-scale-screen 支持 Vue2.6 及以上版本，包括 Vue3，这使得它能够与多种前端开发技术栈兼容。在不同的浏览器环境中，该组件也能够稳定运行，保证了在各种设备和平台上的性能一致性