這里以 1920 / 1080 設(shè)計稿為例, 如是其它設(shè)計稿可自行調(diào)整相應(yīng)的比例，之后開發(fā)的話按照設(shè)計稿中的尺寸進(jìn)行開發(fā)即可：
- 整個項(xiàng)目根元素放在 為
<div id="root"></div>
- 設(shè)置 根元素的樣式；
#root {
width: 1920px;
height: 1080px;
min-width: 1920px;
max-width: 1920px;
min-height: 1080px;
max-height: 1080px;
}
- 設(shè)置 js 腳本
window.onresize = () => {
initMainBody();
};
initMainBody();
function initMainBody () {
let clientWidth = document.documentElement.clientWidth;
let clientHeight = document.documentElement.clientHeight;
let WHRatio = clientWidth / clientHeight;
let root = document.querySelector('#root')
if (WHRatio <= 16/9) { // 16 / 9 就是 1920 / 1080的屏幕
// 說明是窄長屏，此時要將 寬度拉滿，
root.style.transform = 'scale(' + clientWidth / 1920 + ',' + clientWidth / 1920 + ')'
} else {
// 說明是寬屏，此時要將 高度拉滿，
root.style.transform = 'scale(' + clientHeight / 1080 + ',' + clientHeight / 1080 + ')'
}
}
