同樣是，雖然標題寫的vue項目適用，但其它前端框架應該也可以。其它框架我沒什么經(jīng)驗，可以參考著看看，應該適用。

本文章不涉及第三方插件，純js。

自適應這個問題，老早以前就有一個解決方式，css中的%，比如height:100%; width:100%;給主容器賦予該樣式，那主容器就可以自適應屏幕，但里面的內(nèi)容不會，如果要里面的內(nèi)容也自適應，那里面也得寫%，但問題隨之而來，font-size呢？

%雖然現(xiàn)在依然有用，但現(xiàn)在的項目很多都有設計稿，比如我接觸比較多的數(shù)據(jù)大屏，這類網(wǎng)頁，長寬比是固定的，%無法解決字體自適應的問題。熟悉rem的，可以用rem，這個單位類似于微信小程序的rpx，算是自適應屬性，但我沒用過，不講，今天的主角不是它。

接下來就是正文了。在長寬比固定的情況下，網(wǎng)頁自適應，其實就是將網(wǎng)頁等比例放大或者縮小。我們提出一個 設想，在網(wǎng)頁初始化的時候，正確地放大或者縮小網(wǎng)頁，來適應屏幕；并在瀏覽器顯示區(qū)域發(fā)生變化時，修改放大或者縮小的比例，使網(wǎng)頁始終能夠適應屏幕。

放大和縮小，有什么現(xiàn)有的方法或者樣式嗎？有， css中的 zoom 以及 scale（），淺講一下兩個樣式的不同之處：

zoom:

        1. 使用該樣式的標簽會等比例縮放。zoom:0.5 （縮放50%），zoom:2（放大兩倍）。

        2. 縮放的基準點在原容器的左上角（應該沒記錯，想證實的可以自己試試），意思就是，使用zoom放大縮小，原容器的左上角作為原點不動，然后邊長放大縮小。在數(shù)學里的話，差不多就是原點固定，然后在第四象限放大縮小。

        3. 火狐firefox不支持。

scale():

        1. 使用該樣式的標簽也會放大縮小，不過它可以讓長寬獨立放大縮小。transform: scale(2, 2); （放大兩倍），transform: scale(0.5, 2); （水平方向縮放50%，垂直方向放大2倍）。

        2. 縮放的基準點在原容器的中心，意思大概是以原容器中心為原點，然后想一二三四象限擴張火收縮。

        3. 火狐firefox支持。

對比下來，scale()優(yōu)勢明顯，我們就用scale()，它是css3的屬性，我們不考慮什么兼容問題，現(xiàn)在還不支持css3的瀏覽器，我都不稀罕用。如果非要用zoom，也可以，因為代碼方面差不多。

既然上面的 設想 可以有方法實現(xiàn)，現(xiàn)在就剩最后一個問題了，縮放多少呢？

場景假設：我們以設計稿 1920px*1080px為例，但是現(xiàn)在我們的屏幕沒有1920*1080，或者瀏覽器沒有最大化，就占了屏幕的一半，這時候很可能瀏覽器長寬比連16:9都不是，我們可以寬度做基準，高度來適應寬度（高度為基準，寬度適應高度也可以，看場景和具體需要）。設計稿的寬度是1920px，而瀏覽器可視寬度是 window.innerWidth，我們需要在瀏覽器可視范圍內(nèi)自適應縮放容器，也就是在 window.innerWidth 的寬度中來顯示 1920px的東西，那我們的 縮放比例 就是 window.innerWidth / 1920。

所有問題都解決了，現(xiàn)在就來實現(xiàn)我們的設想。下面我以scale()為例了。

 在網(wǎng)頁初始化的時候，正確地放大或者縮小網(wǎng)頁，來適應屏幕。翻譯：mounted() 的時候scale()主容器。

mounted() {
    var browerWidth = window.innerWidth; //瀏覽器可視寬度
    var baseWidth = 1920; //設計稿寬度
    var zoomValue = browerWidth / baseWidth; //縮放比例計算
    document.getElementById("mainContainer").style.transform = 
        "scale(" + zoomValue + "," + zoomValue + ")"; //mainContainer為主容器id
}

在瀏覽器顯示區(qū)域發(fā)生變化時，修改放大或者縮小的比例，使網(wǎng)頁始終能夠適應屏幕。翻譯：窗口尺寸變化時，重新計算縮放比例，并重新scale()主容器。

window.onresize = function () {
      var browerWidth = window.innerWidth;
      var baseWidth = 1920;
      var zoomValue = browerWidth / baseWidth;
      document.getElementById("mainContainer").style.transform = 
        "scale(" + zoomValue + "," + zoomValue + ")";
    }

整合一下：

mounted() {
    var browerWidth = window.innerWidth; //瀏覽器可視寬度
    var baseWidth = 1920; //設計稿寬度
    var zoomValue = browerWidth / baseWidth; //縮放比例計算
    document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; //mainContainer為主容器id
    window.onresize = function () { //窗口尺寸變化時，重新計算和縮放
      browerWidth = window.innerWidth;
      zoomValue = browerWidth / baseWidth;
      document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")";
    }
}

到這里，自適應的內(nèi)容已經(jīng)結(jié)束，但還不完美。如果顯示區(qū)域的比例不是16:9。兩種情況：

        1. 寬度更大，高度為了適應寬度，會導致垂直方向顯示不全，需要上下滾動顯示。這個就改成以高度為基準。上面的 場景假設 有提到。

        2. 高度更大，或者使用了1的解決方法。因為顯示區(qū)域不是16:9，而設計稿是16:9，總會有部分區(qū)域不屬于主容器，那這部分區(qū)域就是白色的很難看，像這樣：

這個問題其實就很簡單了，我們給主容器再套一個父容器，父容器來設置背景色填充留白。父容器的樣式這么寫（自適應窗口，并讓子元素水平垂直居中，留白部分用背景色填充）：

#app {
  width: 100vw;
  height: 100vh;
  background: rgb(24, 25, 35);
  display: flex;
  align-items: center;
  justify-content: center;
}

最終效果圖：

總結(jié)

到此這篇關于vue項目網(wǎng)頁自適應等比例放大縮小的文章就介紹到這了,更多相關vue網(wǎng)頁自適應等比例放大縮小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論