背景：我做的是一個現場活動的遊戲頁面，對前端適配要求比較高。我選擇js框架是vue,ui框架是element-ui。當初我就想做個最小寬度1200然後再結合媒體查詢一起使用。然而發現寫的程式碼太多了感覺css控制特別麻煩。而且現場活動的電腦螢幕尺寸還特別的千奇百怪沒辦法只能重新想方法。

我第一次嘗試的寫法是：首先一屏顯示，獲取當前頁面的視窗的高度，顯示區的部分全用設計稿的百分比控制。感覺寫了太多的css還達不到想要的結果

突然想到 tansform:scale縮放，適配有很多方法這只是我認為適合我們自己的業務。首先我不用寫很多的適配css進行控制。gud

  顯示區固定尺寸的設計稿 動態獲取當前檢視區的頁面高度和寬度。此時顯示區域的縮放比例用 獲取到的高度 / 設計稿固定的高度。然後再把總的頁面區域用這個縮放比例縮放（縮小或者放大）。此時的寬度用 獲取到的寬度 / 縮放比例。動態賦值給最外層顯示區。

簡單的程式碼如下：

mounted() {

    this.autoSetScale() // 進頁面先執行一次頁面高度和寬度計算然後賦值

    window.addEventListener('resize', () => {

      this.autoSetScale()

    }, false)

  },

  methods: {

    // 自動縮放螢幕比例

    autoSetScale() {

      let zoom = (window.innerHeight / 800).toFixed(3)

      this.transformScale = `scale(${zoom})`

      this.width = `${(window.innerWidth / zoom).toFixed(2)}px`

    }

}

這是vue頁面上賦值的部分

這只是其中的一個簡單的頁面效果圖

自由調節的小屏

全屏：

這是我實現的簡單的業務，有其他方法歡迎留言指教。謝謝