設(shè)我們正在開發(fā)一個可視化拖拽的搭建平臺，可以拖拽生成工作臺或可視化大屏，或者直接就是開發(fā)一個大屏，首先必須要考慮的一個問題就是頁面如何適應(yīng)屏幕，因為我們在搭建或開發(fā)時一般都會基于一個固定的寬高，但是實際的屏幕可能大小不一，接下來我們就嘗試幾種簡單且常見的方案，并簡單分析一下利弊。

demo

首先寫個基礎(chǔ)的demo給后續(xù)使用：

<script setup>
import { ref } from "vue";
import Widget from "./components/Widget.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
import FunnelChart from "./components/FunnelChart.vue";

// 畫布寬高
const canvasWidth=ref(1920);
const canvasHeight=ref(1080);
// 組件寬高
const widgetWidth=ref(960);
const widgetHeight=ref(540);
</script>

<template>
  <div class="canvasBox">
    <div
      class="canvas"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    >
      <Widget :width="widgetWidth" :height="widgetHeight" :left="0" :top="0">
        <LineChart></LineChart>
      </Widget>
      <Widget :width="widgetWidth" :height="widgetHeight" :left="widgetWidth" :top="0">
        <BarChart></BarChart>
      </Widget>
      <Widget :width="widgetWidth" :height="widgetHeight" :left="0" :top="widgetHeight">
        <PieChart></PieChart>
      </Widget>
      <Widget :width="widgetWidth" :height="widgetHeight" :left="widgetWidth" :top="widgetHeight">
        <FunnelChart></FunnelChart>
      </Widget>
    </div>
  </div>
</template>

<style scoped>
.canvasBox {
  width: 100vw;
  height: 100vh;
}
.canvas {
  position: relative;
}
</style>

每個圖表組件的寬高都設(shè)為100%，然后都被Widget組件包裹，所以實際寬高是依賴Widget組件的，Widget組件為絕對定位，并且寬高、位置通過props傳入，模擬我們的拖拽操作，簡單起見，所有圖表的寬高我們都設(shè)為了相同的。

Widget組件：

<script setup>
const props=defineProps({
  width: {
    type: Number,
    default: 0,
  },
  height: {
    type: Number,
    default: 0,
  },
  left: {
    type: Number,
    default: 0,
  },
  top: {
    type: Number,
    default: 0,
  },
});
</script>

<template>
  <div
    class="widgetBox"
    :style="{
      width: width + 'px',
      height: height + 'px',
      left: left + 'px',
      top: top + 'px',
    }"
  >
    <slot></slot>
  </div>
</template>

<style scoped>
.widgetBox {
  position: absolute;
}
</style>

組件整體的容器為類名為canvas的元素，相對定位，寬高也是動態(tài)設(shè)置的，canvas元素的父級canvasBox元素寬高設(shè)為和屏幕寬高一致。

固定尺寸

即寬度、高度固定，如果寬高小于屏幕寬高則在屏幕居中。

這個是最簡單的方案了，相當(dāng)于不適配屏幕，畫布配置了多大實際就是多大，不隨屏幕的變化而變化，所以各個組件的寬高也是在配置后不會改變，一般用于尺寸固定且后期不會改變的可視化大屏。

我們前面的demo初始就是這種方式：

當(dāng)然，如果寬高小于屏幕的話居中的邏輯需要加一下，居中的方法有很多，通過css、js都可，根據(jù)自己的喜好來就行：

// 畫布的位置
const canvasLeft=ref(0);
const canvasTop=ref(0);
// 如果屏幕的寬或高比畫布的大，那么居中顯示
let windowWidth=window.innerWidth;
let windowHeight=window.innerHeight;
if (windowWidth > canvasWidth.value) {
    canvasLeft.value=(windowWidth - canvasWidth.value) / 2;
}
if (windowHeight > canvasHeight.value) {
    canvasTop.value=(windowHeight - canvasHeight.value) / 2;
}

<div
      class="canvas"
      :style="{
        width: canvasWidth + 'px',
        height: canvasHeight + 'px',
        left: canvasLeft + 'px',
        top: canvasTop + 'px',
      }"
    >
</div>

判斷窗口寬度和高度是否大于畫布的寬高，是的話通過left或top來調(diào)整：

自適應(yīng)寬度

即寬度適應(yīng)屏幕，高度不變，這種方案的缺點是垂直方向上會出現(xiàn)滾動條。

比如畫布設(shè)置的寬度為1920，但是實際上屏幕的寬度為1280，那么縮小了1.5倍，那么畫布和每個組件的寬度也需要同步縮小1.5倍，并且每個組件的left值也需要進行動態(tài)調(diào)整。

首先實現(xiàn)一下容器元素canvas的尺寸調(diào)整：

// 保存原始畫布的寬度
const originCanvasWidth=ref(canvasWidth.value);
// 寬度縮放比例
const ratioWidth=ref(1);

// 當(dāng)前窗口的寬度
let windowWidth=window.innerWidth;
// 將畫布寬度設(shè)置為當(dāng)前窗口的寬度
canvasWidth.value=windowWidth;
// 計算當(dāng)前寬度和原始寬度的比例
ratioWidth.value=windowWidth / originCanvasWidth.value;

然后再把這個比例傳給Widget組件進行調(diào)整：

<Widget :ratioWidth="ratioWidth">
    <LineChart></LineChart>
</Widget>
<Widget :ratioWidth="ratioWidth">
    <BarChart></BarChart>
</Widget>
<Widget :ratioWidth="ratioWidth">
    <PieChart></PieChart>
</Widget>
<Widget :ratioWidth="ratioWidth">
    <FunnelChart></FunnelChart>
</Widget>

在Widget組件里我們只要把寬度和left都乘以這個比例即可，為什么是乘，很簡單：

newWidth / width=ratioWidth=windowWidth / originCanvasWidth
newWidth=width * ratioWidth

// left同樣看做是一個距左側(cè)的寬度即可

<div
    class="widgetBox"
    :style="{
      width: width * ratioWidth + 'px',
      height: height + 'px',
      left: left * ratioWidth + 'px',
      top: top + 'px',
    }"
  >
    <slot></slot>
</div>

自適應(yīng)屏幕

即寬高都自適應(yīng)，和上一種方案相比，這種橫豎都不會出現(xiàn)滾動條，且能完全鋪滿屏幕。

實現(xiàn)也很簡單，在上一個【自適應(yīng)寬度】的基礎(chǔ)上加上高度自適應(yīng)即可。

// 畫布原始寬高
const originCanvasWidth=ref(canvasWidth.value);
const originCanvasHeight=ref(canvasHeight.value);
// 縮放比例
const ratioWidth=ref(1);
const ratioHeight=ref(1);

// 當(dāng)前窗口的寬高
let windowWidth=window.innerWidth;
let windowHeight=window.innerHeight;
// 將畫布寬高設(shè)置為當(dāng)前窗口的寬高
canvasWidth.value=windowWidth;
canvasHeight.value=windowHeight;
// 計算當(dāng)前寬高和原始寬高的比例
ratioWidth.value=windowWidth / originCanvasWidth.value;
ratioHeight.value=windowHeight / originCanvasHeight.value;

同樣再把比例傳給Widget組件進行調(diào)整：

<Widget :ratioWidth="ratioWidth" :ratioHeight="ratioHeight">
    <LineChart></LineChart>
</Widget>
<Widget :ratioWidth="ratioWidth" :ratioHeight="ratioHeight">
    <BarChart></BarChart>
</Widget>
<Widget :ratioWidth="ratioWidth" :ratioHeight="ratioHeight">
    <PieChart></PieChart>
</Widget>
<Widget :ratioWidth="ratioWidth" :ratioHeight="ratioHeight">
    <FunnelChart></FunnelChart>
</Widget>

<div
    class="widgetBox"
    :style="{
      width: width * ratioWidth + 'px',
      height: height * ratioHeight + 'px',
      left: left * ratioWidth + 'px',
      top: top * ratioHeight + 'px',
    }"
  >
    <slot></slot>
</div>

整體等比例縮放

即通過css的transform屬性來對組件容器canvas進行整體的縮放，保持原比例，在屏幕居中顯示，當(dāng)然你可以選擇只縮放寬度或高度，但是這樣會變形。

前面的兩種方案，我們的組件開發(fā)時都必須要考慮容器的寬高，即需要進行適配，但是寬高比太極限了說實話很難處理，顯示效果肯定是比較差的，但是這種整體等比例適配就無需考慮這種情況。

實際項目中如果有大屏需要適應(yīng)屏幕，我一般都通過這種方法，優(yōu)點是簡單，缺點是水平或垂直空間上可能會留白，但是背景是全屏的，所以效果也不會很差。

實現(xiàn)也很簡單，計算一下畫布原始比例，再計算一下屏幕的比例，然后再判斷是寬度和屏幕一致，高度自適應(yīng)，還是高度和屏幕一致，寬度自適應(yīng)：

// 當(dāng)前窗口寬高比例
let windowWidth=window.innerWidth;
let windowHeight=window.innerHeight;
let windowRatio=windowWidth / windowHeight;
// 畫布原始寬高比例
const canvasRatio=canvasWidth.value / canvasHeight.value;
// 計算畫布適應(yīng)后的新寬高
let newCanvasWidth=0;
let newCanvasHeight=0;
if (canvasRatio > windowRatio) {// 畫布的寬高比大于屏幕的寬高比
    // 畫布的寬度調(diào)整為屏幕的寬度
    newCanvasWidth=windowWidth;
    // 畫布的高度根據(jù)畫布原比例進行縮放
    newCanvasHeight=windowWidth / canvasRatio;
} else {// 畫布的寬高比小于屏幕的寬高比
    // 畫布的高度調(diào)整為屏幕的高度
    newCanvasHeight=windowHeight;
    // 畫布的寬度根據(jù)畫布原比例進行縮放
    newCanvasWidth=windowHeight * canvasRatio;
}
// ...

假設(shè)屏幕的寬高相同，那么比例為1。

第一種情況，假設(shè)畫布的寬是高的兩倍，那么比例為2，要保持原比例2適應(yīng)屏幕，顯然只能寬度和屏幕一致，高度自適應(yīng)，因為如果高度和屏幕一致，那么寬度需要是高度的兩倍，屏幕顯然顯示不下：

第二種情況，假設(shè)畫布的高是寬的兩倍，那么比例為0.5，要保持比例為0.5適應(yīng)屏幕，需要高度和屏幕一致，寬度自適應(yīng)：

計算完了畫布適應(yīng)屏幕后的新寬高，接下來就可以計算它相對于畫布原始寬高的縮放比例：

// ...
// 相對于畫布原始寬高的縮放比例
const canvasStyle=reactive({
    transform: "",
});
const scaleX=newCanvasWidth / canvasWidth.value;
const scaleY=newCanvasHeight / canvasHeight.value;
canvasStyle.transform=`scale(${scaleX}, ${scaleY})`

把樣式添加到容器元素canvas上即可：

<div
      class="canvas"
      :style="{
        width: canvasWidth + 'px',
        height: canvasHeight + 'px',
        ...canvasStyle
      }"
    >
</div>

顯示的位置似乎有點問題，這其實是因為默認情況下元素的變換都是以自身的中心點為原點進行變換的：

我們只要改成以左上角為原點即可：

const canvasStyle=reactive({
  transform: "",
  transformOrigin: `left top`// 改成以左上角為變換原點
});

最后再來讓它居中：

// 居中
const translateX=(windowWidth - newCanvasWidth) / 2 / scaleX;
const translateY=(windowHeight - newCanvasHeight) / 2 / scaleY;
canvasStyle.transform=`scale(${scaleX}, ${scaleY}) translate(${translateX}px, ${translateY}px)`;

窗口的寬高減去畫布適應(yīng)后的新寬高，即剩余的空間，再除以2進行居中顯示，為什么還要除以縮放值呢，因為translate的值也會隨scale進行縮放，比如translateX計算出來為100，scaleX為0.5，那么實際上最終的偏移量為100*0.5=50，這顯然不對，所以我們除一個縮放值進行抵消。

這個方案似乎很完美，那么還有沒有問題呢，顯然是有的，一個小問題是縮放后文字可能會模糊，這個問題不大，筆者遇到的另一個問題是如果使用了getBoundingClientRect方法獲取元素信息，本意是獲取元素原始的尺寸數(shù)據(jù)，但是縮放后返回的就是縮放后的數(shù)據(jù)，那么可能會和我們的原始意圖出現(xiàn)偏差，比如有一個如下的div：

<div ref="el1" style="width: 200px; height: 200px; background: red; position: absolute; left: 50px; top: 50px;"></div>

我們想要動態(tài)根據(jù)這個div大小和位置復(fù)制一個div：

<div ref="el2" style="background: green; position: absolute"></div>

const { width, height }=el1.value.getBoundingClientRect();
const { left, top }=window.getComputedStyle(el1.value);
el2.value.style.width=`${width}px`;
el2.value.style.height=`${height}px`;
el2.value.style.left=left;
el2.value.style.top=top;

可以看到獲取到的寬高比實際的小了一點，這顯然不是我們需要的，解決方法是要么不要使用getBoundingClientRect方法，使用offsetWdith等不會被縮放影響的方法或?qū)傩垣@取元素尺寸，要么把獲取到的數(shù)據(jù)除以縮放值。

當(dāng)然可能還會存在其他一些屬性或方法也會存在這個問題，這就需要各位在實際的開發(fā)時進行測試了。

總結(jié)

本文簡單總結(jié)了一下大屏適配的幾種方法，沒有哪一種是最好的，也沒有哪一種是非常完美的，沒辦法，很多時候都是需要進行一定妥協(xié)的。

demo地址：https://wanglin2.github.io/visual-drag-platform-fit-demo/

demo倉庫地址：https://github.com/wanglin2/visual-drag-platform-fit-demo

ul {
 margin: 0.75em 0;
 padding: 0 1em;
 list-style: none;
}
li:before { 
 content: "";
 border-color: transparent #111;
 border-style: solid;
 border-width: 0.35em 0 0.35em 0.45em;
 display: block;
 height: 0;
 width: 0;
 left: -1em;
 top: 0.9em;
 position: relative;
}

#mydiv { 
 -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
 -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
 box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

#mydiv { 
 -moz-box-shadow: inset 2px 0 4px #000;
 -webkit-box-shadow: inset 2px 0 4px #000;
 box-shadow: inset 2px 0 4px #000;
}

tbody tr:nth-child(odd) {
 background-color: #ccc;
}

html { height: 101% }

.container {
 min-height: 6.5em;
 display: table-cell;
 vertical-align: middle;
} 

html { 
 background: url('images/bg.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

h1 {
 text-indent: -9999px;
 margin: 0 auto;
 width: 320px;
 height: 85px;
 background: transparent url("images/logo.png") no-repeat scroll;
}

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

.transparent {
 filter: alpha(opacity=50); /* internet explorer */
 -khtml-opacity: 0.5; /* khtml, old safari */
 -moz-opacity: 0.5; /* mozilla, netscape */
 opacity: 0.5; /* fx, safari, opera */
}

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

.clearfix:after {
 content: "."; 
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0; 
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.blurry-text {
 color: transparent;
 text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

td {
 white-space: nowrap;
}

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<body>
 <style>
 html {
 font-size: 50px;
 }

 .my-div {
 width: 100%;
 height: 500px;
 margin-top: 50px;
 background-color: gray;
 font-size: 40px;
 }

 .my-div .parent-font {
 font-size: 30px;
 }

 .my-div .parent-font .child-font {
 font-size: 0.5em;
 }
 </style>
 <div class="my-div">
 <p class="parent-font">
 我是父級文字
 <span class="child-font">我是子級文字</span>
 </p>
 </div>
</body>

document.documentElement.style.fontSize=100 * ( document.documentElement.clientWidth / 750) + 'px'

const fontFun=function () {
 let docEl=document.documentElement
 let resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize'
 const recalc=function () {
 let clientWidth=docEl.clientWidth
 if (!clientWidth) return
 docEl.style.fontSize=100 * (clientWidth / 750) + 'px'
 }
 if (!document.addEventListener) return
 window.addEventListener(resizeEvt, recalc, false)
 window.addEventListener('pageshow', recalc, false)
 document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
 fontFun
}

(function(doc, win) {
 var docEl=doc.documentElement,
 resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
 recalc=function() {
 var clientWidth=docEl.clientWidth
 if (!clientWidth) return
 docEl.style.fontSize=100 * (clientWidth / 750) + 'px'
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 win.addEventListener('pageshow', recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)