利用 scale 实现大屏展示按照设计稿等比例缩放方案

这里以 1920 / 1080 设计稿为例, 如是其它设计稿可自行调整相应的比例，之后开发的话按照设计稿中的尺寸进行开发即可：

1. 整个项目根元素放在 为

2. 设置 根元素的样式；

#root {
  width: 1920px;
  height: 1080px;
  min-width: 1920px;
  max-width: 1920px;
  min-height: 1080px;
  max-height: 1080px;
}

3. 设置 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 + ')'
    }

}