越來越多的前端項目現在需要這個操作，其操作的原因很簡單，你的項目可能跑在小尺寸分辨率的電腦上，也有可能在大尺寸的會議平闆上，更有甚者是在LED上。那麼如何讓你的項目根據螢幕分辨率的大小而自動變化，修改頁面展示字型以及調整尺寸呢？
按照我們所需功能，我們還是先來對一下流程及需求。
第一：我們要求頁面一打開就擷取螢幕大小，通過計算設定尺寸及字型大小。
第二：我們當頁面分辨率修改後（拖動、或者分辨率轉換）我們也需要設定其尺寸和大小。
鑒于以上兩種需求。我們可以提煉出。
1. 我們需要一個監測螢幕分辨率的方法。
2. 我們的頁面尺寸需要使用rem來進行編寫。
3. 我們需要根據螢幕情況來動态設定font-size
下來我們來編寫代碼：
我們建立一個檔案index.js 并将這個檔案引入到 index.html 中
在這個index.js中我們先放置一個空的自執行函數
// 項目根目錄建立檔案 util.js
放置一個自執行函數
(() => {
// 内容
})() 然後在這個自執行函數裡我們再寫一個函數方法，這個方法來動态設定字型大小
(() => {
// 設定字型大小
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的緣故，此處不了解的可以自行百度。
設定完設定字型代碼後，我們完成了上述需求的第三個，則還需要第一個跟第二個。
那下來我們再寫一個方法用來監測電腦分辨率。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 方法的意思是用于在網頁加載完畢後立刻執行的操作，即當 HTML 文檔加載完畢後，立刻執行某個方法。也就是頁面初始化的時候去加載。在這裡面我們需要昨個操作，也就是頁面一加載完的時候，我們需要去給window的 onresize 綁定一個方法。
window.onload = () => {
console.log("頁面加載完成")
let resize_timer = null;
const resize = () => {
}
window.onresize = resize;
} window.onresize的意思是，當監測到螢幕分辨率變的時候，是以我們需要一個操作就是，頁面一加載完成，我們給window.onresize 綁定一個方法。這個方法隻綁定一次，而不需要每次都去綁定。這樣的話，當每次螢幕分辨率改變的時候，都會去執行 resize 這個方法。
那麼這個方法裡我們應該些什麼呢？那就是調用我們第一步做的 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;
}
})() 我們去頁面上檢視，會發現當我們拖動文檔流的時候，字型并不會重新設定。如下我拖了兩次都沒有觸發修改。同樣是12.8.
隻有當我們改完電腦螢幕分辨率後，它才會重新設定。就比如，我從筆記本的螢幕拖動項目到外接顯示器上。它就會響應重新設定 font-size。如下：
當我拖到外接顯示器後，它自動的出發了 calcFontSize 方法重新配置了字型大小。
到這裡我們的主功能就設定結束了。
但是我們發現每次觸發resize後。
我們的resize被執行了兩次？這是怎麼回事呢？
這是因為，每次window.onresize 都會去執行 resize，而在螢幕分辨率發生變化的時候，window.onresize 和浏覽器的自身實作有關系.不同的浏覽器和作業系統實作可能不一樣,目前谷歌是執行了兩次，有是時候是一次。是以導緻頁面變化有點閃動。那怎麼辦呢？
那就是去增加settimeout 來達到短時間隻觸發一次的效果。
(() => {
// 設定字型大小
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;
}
})()