通過transform的縮放效果 讓真實寬高和現實的瀏覽器窗口大小進行等比例縮放

1.HTML

:style="{width: windowWidth+'px',height:windowHeight+'px',transform:'scale('+realWidth/windowWidth +','+realHeight/windowHeight +')'}"

2.獲取瀏覽器窗口大小

this.screenWidth = document.body.clientWidth;

? ? this.screenHeight = document.body.clientHeight;

? ? window.onresize = () => {

? ? ? return (() => {

? ? ? ? this.realWidth = document.documentElement.clientWidth;

? ? ? ? this.realHeight = document.documentElement.clientHeight;

? ? ? })();

? ? };

總結

以上是生活随笔為你收集整理的可视化大屏自适应效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。