大屏可視化項目在還原設計圖時摩窃，需要考慮不同的屏幕尺寸卤恳，所以需要使用動態(tài)適配的方案來盡可能還原設計圖。
要求
設計圖比例為 16 / 9洞焙，需要在不同屏幕尺寸(瀏覽器視口尺寸)下蟆淀，大屏頁面都能保證比例不變，元素和字體大小根據屏幕大小自動適配澡匪。
設計方案
設計圖尺寸為 16:9熔任，屏幕尺寸有兩種可能：
屏幕寬度:屏幕高度 > 16:9
此時設計圖需要等比例放大，直到
顯示高度 = 屏幕高度唁情；
由于始終設計圖寬度 : 設計圖高度 = 16:9疑苔，
所以最終顯示寬度 = 屏幕高度 * (16 / 9)，顯示高度 = 顯示寬度 / (16 / 9)甸鸟；
屏幕寬度:屏幕高度 <= 16:9
此時始終
顯示寬度 = 屏幕寬度夯巷，顯示高度 = 顯示寬度 / (16 / 9)
rem
rem 就是 <html>元素的 font-size，默認為 16px (瀏覽器默認font-size)
em 是字體中 ‘一個字’ 的寬度
px 像素大小
考慮到需要動態(tài)適配哀墓，不能使用像素單位趁餐，所以單位以屏幕寬度為標準 頁面顯示寬度 / 100 = 1rem，就能完美還原設計稿篮绰；
在頁面渲染之前后雷，使用 JS 獲取設備寬度并設置 頁面顯示寬度 = 100rem
計算公式
通過計算公式，只需要知道一個元素在設計圖中的尺寸就可以計算出在頁面的顯示尺寸；
可以通過自定義一個函數來計算出頁面顯示尺寸臀突，從而達到動態(tài)適配的效果
實施步驟
在 index.html 的 head中獲取瀏覽器寬高
<script>
const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
const pageHeight = pageWidth / (16 / 9)
const string = `
<style>html{
font-size: ${pageWidth / 100}px
}</style>
`
document.write(string)
</script>
在 body 中將獲得的尺寸給根組件
<body>
<div id="root"></div>
<script>
root.style.width = pageWidth + 'px'
root.style.height = pageHeight + 'px'
root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>
<script type="module" src="/src/main.tsx"></script>
</body>
給根組件 div 樣式
<style>
#root {
margin: 0 auto;
background: lightgreen
}
</style>
效果如下：
隨意改變窗口大小勉抓，刷新之后頁面始終保持水平垂直居中，而且頁面元素大小自適應候学，頁面字體始終為
pageWidth / 100 px藕筋，也就是 1rem。
將總結出來的計算公式封裝成一個函數梳码，使用時只需要引入文件即可
@function px($n) {
@return $n / 設計圖寬度* 100rem;
}
// 使用
.x {
height: px(100)
width: px(100)
}
