關于web端适配螢幕問題

記錄貼

公司dashboard頁面需要适應平闆以及大屏頁面的适配

前端适配螢幕大小主要是百分比以及vw和vh還有rem

主要我們說的是 rem

rem它是相對長度機關。相對于根元素(即html元素)font-size計算值的倍數的一個css機關，也就是我們前端常說的适配機關rem。

我們可以通過 document.documentElement 擷取到根元素root。

如果rem在html根元素沒有設定font-size的值時，1rem=16px

設定了的話 需要使用設計稿的寬高除以設定的值，下面我們假定設定的值是18px

html｛font-size:18px｝
           

設計稿的寬高是50x50

換算成rem則為50/18=2.78rem(保留兩位小數)

我們封裝一個方法用來适配web端和m端

(function () {
      function setFontSize() {
        var winWidth = document.documentElement.clientWidth//擷取浏覽器寬
        //設定root的fontSize
        document.documentElement.style.fontSize = (winWidth / 1920)*100  + 'px'//（浏覽器寬/設計稿寬）*100px;
        console.log(winWidth)
        console.log(document.documentElement.style.fontSize)
      }
      var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize'//判斷是否有旋轉屬性(有旋轉的為平闆和移動端)
      console.log(evt)
      var timer = null
      //監聽，螢幕旋轉，和web端，大小改變事件，
      window.addEventListener(
        evt,
        function () {

          clearTimeout(timer)
          timer = setTimeout(setFontSize, 300)//防止改變過快還未執行
        },
        false
      )
      window.addEventListener(
        'pageshow',
        function (event) {
          if (event.persisted) {
            clearTimeout(timer)
            timer = setTimeout(setFontSize, 300)//頁面顯示(pageshow)事件
          }
        },
        false
      )
      // 初始化加載js檔案時
      setFontSize()
    })()
           

我們設定的浏覽器寬/設計稿寬*100px的目的是為了放大改變的比例這樣子我們可以更好的适應web端以及m端，如果将= (winWidth / 1920)*16的話在M端上檢視時會有像素差，非常明顯，大家可以試一試

封裝完成後我們使用隻需要把想設定的寬高除以100在加上rem即可

當然vscode有自動轉換的工具，小夥伴們可以自行查找

以上内容僅供參考