一般來説，做PC端的頁面並不像移動端那樣對分辨率及屏幕大小有的特別強的要求，但是針對數據大屏這種展示型的頁面來説，就需要考慮適配的方案了，畢竟要儘可能的保證大部分的主流顯示器都能正常展示。

市面上大部分的顯示器幾乎都是16：9的尺寸，也就是1920 * 1080的分辨率。

理想中的效果
當屏幕的尺寸比例剛好是16：9時，頁面能剛好全屏展示，內容佔滿顯示器

當屏幕的尺寸比例小於16：9時，頁面上下留白，左右佔滿並上下居中，顯示比例保持16：9

當屏幕尺寸比例大於16：9時，頁面左右留白，上下佔滿並居中，顯示比例保持16：9

當屏幕大小改變時，動態計算中間內容的顯示比例大小，保證內容一直保持16：9

解決方案
rem
rem(font size of the root element),是 css3 中新增的一個大小單位，即相對於根元素 font-size 值的大小。

思路就是動態的計算出頁面的fontsize從而改變rem的大小。

思路
首先拿 1920 * 1080 的標準屏幕大小為例。將屏幕分為10份，先計算rem的基準值: 1920 / 10 = 192 ,然後把所有元素的長，寬，位置，字體大小等原來的 px 單位全部轉換成 rem, 網頁加載後，用 js 去計算當前瀏覽器的寬度，並設置 html 的 font-size 為 (當前瀏覽器窗口寬度 / 10),這樣的話10rem就剛好等於瀏覽器窗口的寬度。也就可以保證100%寬度，等比例縮放設計稿的頁面了。

兩件事：

獲得 rem 的基準值。這邊默認設置容器寬度為1920 * 1080，然後用1920 / 192 來計算rem的值
頁面內寫一段js代碼，動態的計算html根元素的font-size
實現
站在巨人的肩膀上，我們不需要去從0到1去實現兩個需求。

針對第一點：

首先安裝 @njleonzhang/postcss-px-to-rem 這個包
npm i @njleonzhang/postcss-px-to-rem -D
複製代碼
新建.postcssrc.js配置文件
module.exports = {
plugins: {

autoprefixer: {},
"@njleonzhang/postcss-px-to-rem": {
  unitToConvert: 'px', // (String) 要轉換的單位，默認是px。
  widthOfDesignLayout: 1920, // (Number) 設計佈局的寬度。對於pc儀表盤，一般是1920.
  unitPrecision: 3, // (Number) 允許 REM 單位增長到的十進制數字.
  selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略並保留為 px 的選擇器.
  minPixelValue: 1, // (Number) 設置要替換的最小像素值.
  mediaQuery: false // (Boolean) 允許在媒體查詢中轉換 px.
}

}
}
​
複製代碼
配置完成後，頁面內的px就會被轉換成rem了
針對第二點：

新建一個rem.js文件,在入口中引入，用於動態計算font-size

(function init(screenRatioByDesign = 16 / 9) {
let docEle = document.documentElement
function setHtmlFontSize() {

var screenRatio = docEle.clientWidth / docEle.clientHeight;
var fontSize = (
  screenRatio > screenRatioByDesign
    ? (screenRatioByDesign / screenRatio)
    : 1
) * docEle.clientWidth / 10;
docEle.style.fontSize = fontSize.toFixed(3) + "px";
console.log(docEle.style.fontSize);

}
​
setHtmlFontSize()
​
window.addEventListener('resize', setHtmlFontSize)
})()
複製代碼
至此，頁面就已經可以實現16：9自適應了

最後
如果你覺得此文對你有一丁點幫助，點個贊。或者可以加入我的開發交流羣：1025263163相互學習，我們會有專業的技術答疑解惑

如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點star: https://gitee.com/ZhongBangKe...不勝感激 ！