这里以 1920 / 1080 设计稿为例, 如是其它设计稿可自行调整相应的比例,之后开发的话按照设计稿中的尺寸进行开发即可:
- 整个项目根元素放在 为
<div id="root"></div>
- 设置 根元素的样式;
#root {
width: 1920px;
height: 1080px;
min-width: 1920px;
max-width: 1920px;
min-height: 1080px;
max-height: 1080px;
}
- 设置 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 + ')'
}
}