前言：大屏分辨率適配繁多，目前我認為最簡單且問題最少的的方案就是使用v-scale-screen插件，無需考慮單位轉換，position定位也正常使用。

1. 效果

1. 填充滿屏幕的效果
   
2. 保持寬高比的效果
   

2. 插件原理

原理是通過css transfom 實現縮放效果，利用網頁寬高比動態縮放網頁。同時也支持鋪滿全屏，寬高等比、高度等比等自適應方案。

3. 使用

1. 安裝依賴：

注：vue2請使用v-scale-screen@1.0.0版本，vue3請使用v-scale-screen@2.0.0版本

npm install v-scale-screen -save
# or
yarn add v-scale-screen

2. 在main中引入

vue2中使用插件導入，vue3以組件導入

• vue2

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

• vue3

// main.js
<v-scale-screen width="1920" height="1080"><div><v-chart>....</v-chart></div>
</v-scale-screen>
<script>
import VScaleScreen from 'v-scale-screen'
export default {components:{VScaleScreen}
}
</script>

3. 配置項

屬性	說明	類型	默認值
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	500
fullScreen	全屏自適應，啟用此配置項時會存在拉伸效果，同時 autoScale 失效，非必要情況下不建議開啟	Boolean	false
boxStyle	修改容器樣式，如居中展示時側邊背景色，符合 Vue 雙向綁定 style 標準格式	Object	null
wrapperStyle	修改自適應區域樣式，符合 Vue 雙向綁定 style 標準格式	Object	null
bodyOverflowHidden	啟用后body的樣式會自動設置為 overflow: hidden	Boolean	true

4.官方演示地址

Vue2演示地址

Vue3演示地址