越來越多的前端項目現(xiàn)在需要這個操作，其操作的原因很簡單，你的項目可能跑在小尺寸分辨率的電腦上，也有可能在大尺寸的會議平板上，更有甚者是在LED上。那么如何讓你的項目根據(jù)屏幕分辨率的大小而自動變化，修改頁面展示字體以及調(diào)整尺寸呢？

按照我們所需功能，我們還是先來對一下流程及需求。

第一：我們要求頁面一打開就獲取屏幕大小，通過計算設置尺寸及字體大小。

第二：我們當頁面分辨率修改后（拖動、或者分辨率轉換）我們也需要設置其尺寸和大小。

鑒于以上兩種需求。我們可以提煉出。

1. 我們需要一個監(jiān)測屏幕分辨率的方法。

2. 我們的頁面尺寸需要使用rem來進行編寫。

3. 我們需要根據(jù)屏幕情況來動態(tài)設置font-size

下來我們來編寫代碼：

我們新建一個文件index.js? 并將這個文件引入到 index.html 中

在這個index.js中我們先放置一個空的自執(zhí)行函數(shù)

// 項目根目錄新建文件 util.js

放置一個自執(zhí)行函數(shù)

(() => {

    // 內(nèi)容

})()

然后在這個自執(zhí)行函數(shù)里我們再寫一個函數(shù)方法，這個方法來動態(tài)設置字體大小

(() => {
  // 設置字體大小
  function calcFontSize() {
    const zoom = window.screen.width / 1920;
    const size = zoom * 16;
    document.documentElement.style.fontSize = size + 'px';
    console.log('設置字體大小', size);
  }

  

})()

上述代碼中，我們首先獲取屏幕的大小，以1920 為主。1920分辨率下默認font-size設置為16px。至于為什么要設置 font-size。那是因為rem的緣故，此處不了解的可以自行百度。

設置完設置字體代碼后，我們完成了上述需求的第三個，則還需要第一個跟第二個。

那下來我們再寫一個方法用來監(jiān)測電腦分辨率。window.onload

(() => {
  // 設置字體大小
  function calcFontSize() {
    const zoom = window.screen.width / 1920;
    const size = zoom * 16;
    document.documentElement.style.fontSize = size + 'px';
    console.log('設置字體大小', size);
  }

  window.onload = () => {
    
    
  }

})()

上述中window.onload 方法的意思是用于在網(wǎng)頁加載完畢后立刻執(zhí)行的操作，即當 HTML 文檔加載完畢后，立刻執(zhí)行某個方法。也就是頁面初始化的時候去加載。在這里面我們需要昨個操作，也就是頁面一加載完的時候，我們需要去給window的 onresize 綁定一個方法。

 window.onload = () => {
    console.log("頁面加載完成")
    let resize_timer = null;
    const resize = () => {
      
    }
    window.onresize = resize;
  }

window.onresize的意思是，當監(jiān)測到屏幕分辨率變的時候，所以我們需要一個操作就是，頁面一加載完成，我們給window.onresize 綁定一個方法。這個方法只綁定一次，而不需要每次都去綁定。這樣的話，當每次屏幕分辨率改變的時候，都會去執(zhí)行 resize 這個方法。

那么這個方法里我們應該些什么呢？那就是調(diào)用我們第一步做的 calcFontSize 這個方法，修改整個document的font-size 屬性。

 window.onload = () => {
    console.log("頁面加載完成")
    let resize_timer = null;
    const resize = () => {
       calcFontSize();
    }
    window.onresize = resize;
  }

目前的完整代碼如下：

(() => {
  // 設置字體大小
  function calcFontSize() {
    const zoom = window.screen.width / 1920;
    const size = zoom * 16;
    document.documentElement.style.fontSize = size + 'px';
    console.log('設置字體大小', size);
  }
    calcFontSize();

  window.onload = () => {
    console.log("頁面加載完成")

    const resize = () => {
    
        calcFontSize();

    }
    window.onresize = resize;
  }

})()

我們?nèi)ロ撁嫔喜榭?，會發(fā)現(xiàn)當我們拖動文檔流的時候，字體并不會重新設置。如下我拖了兩次都沒有觸發(fā)修改。同樣是12.8.

?

只有當我們改完電腦屏幕分辨率后，它才會重新設置。就比如，我從筆記本的屏幕拖動項目到外接顯示器上。它就會響應重新設置 font-size。如下：

?當我拖到外接顯示器后，它自動的出發(fā)了 calcFontSize 方法重新配置了字體大小。

?到這里我們的主功能就設置結束了。

但是我們發(fā)現(xiàn)每次觸發(fā)resize后。

我們的resize被執(zhí)行了兩次？這是怎么回事呢？

這是因為，每次window.onresize? 都會去執(zhí)行 resize，而在屏幕分辨率發(fā)生變化的時候，window.onresize?和瀏覽器的自身實現(xiàn)有關系.不同的瀏覽器和操作系統(tǒng)實現(xiàn)可能不一樣,目前谷歌是執(zhí)行了兩次，有是時候是一次。所以導致頁面變化有點閃動。那怎么辦呢？

那就是去增加settimeout 來達到短時間只觸發(fā)一次的效果。

(() => {
  // 設置字體大小
  function calcFontSize() {
    const zoom = window.screen.width / 1920;
    const size = zoom * 16;
    document.documentElement.style.fontSize = size + 'px';
    console.log('設置字體大小', size);
  }

  window.onload = () => {
    console.log("頁面加載完成")
    let resize_timer = null;
    const resize = () => {
      if (resize_timer) {
        clearTimeout(resize_timer);
      }
      resize_timer = setTimeout(() => {
        resize_timer = null;
        calcFontSize();
      }, 500);
    }
    window.onresize = resize;
  }

})()

上述代碼中，我們利用防抖的方式來使用setTimeout 達到了讓 resize 在短時間內(nèi)只執(zhí)行一次的效果。再次嘗試后發(fā)現(xiàn)，頁面功能一切正常。

頁面組件樣式大小也達到了我們的要求。文章來源地址http://www.zghlxwxcb.cn/news/detail-411345.html

到了這里，關于前端設置頁面字體尺寸跟隨屏幕大小而進行變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！