這段時間，一直在做一個大屏項目，它的需求是：物理屏幕（LED拼接屏）的分辨率為：6720*2160，大屏頁面需滿足：通過屏幕分辨率為1920*1080的PC的瀏覽器訪問IOC大屏，接HDMI線投屏后，物理大屏可被填滿，顯示分辨率為6720*2160，不會出現圖像拉伸或壓縮。
有了幾個大屏經驗的我們，直接就選擇了vue+element ui 來做這個項目，另外，為了做自適應，我們選擇了用vw,vh作為單位代替px。按照ui的藍湖圖，我寫好的靜態頁面，在pc端上顯示得非常完美，但是萬萬沒想到在投屏時出現了嚴重得壓縮和拉伸得問題。客戶的電腦是1920*1080的分辨率， 大屏幕是拼接屏，不能直接當作一塊顯示屏，只能通過電腦復制投屏達到目的， 1920*1080，與6720*2160的屏幕差異是非常大的，所以文字出現拉伸變寬了，而環狀圖、餅圖就出現了變扁被壓縮的情況。
為了處理這個問題，我們去借鑒了dataV的框架做法，pc端略被縱向擠壓，而復制投屏后就能夠剛好正常拉伸顯示。查看了一番后發現，對方做到了屏幕自適應，但使用的並不是rem，em或者vh,vw，而是直接使用了px作為單位，如下圖：（1576px僅占用了1920px分辨率的四分之一左右！）；
后來再看頁面最大的盒子的特點，發現它除了直接寫px為單位以外，還使用了transform:scale來放大縮小，以達到目的，如下圖：
不斷地拉伸屏幕，發現scale的兩個橫軸軸的數不斷地改變，因此，我們要做的就是考慮如何得到這樣跟着屏幕分辨率大小的變化而跟着變化的比率。
我的做法是這樣的。。。。。。
首先， 用6720/2160，等到大概3.1的比值，那么我們獲取屏幕高為1080px，假設高度不變，那么按照比例，此時寬應該為3348px，也就是1080*3.1，
如果寬度繼續發生變化的話，那么為了讓比例保持不變，那么就要進行比率的調整，將寬度進行縮放，於是我們有了下面這個函數
緊接着，監聽屏幕高度的變化，重新調用上面的resizePage的方法，以此來改變scale中bi的比率，做完上面這一步會發現，這個時候比率會根據屏幕高度的變化而變化，但是當屏幕的寬度發生變化時卻不會再變化了，
因為剛剛的設定就是假設高變化，寬進行transform:scale(xxx,1)的的配置；所以如果寬也發生變化，那也需要進行屏幕寬度變化的監聽，計算出真實的寬與設定3.1倍的寬直接的scale比率，如下圖:
做完這一步，就達到目的了，不管是只改變寬，還是只改變高，或是寬高同時變化都可以實現自適應。