要在F11全屏模式下查看

方法一，rem + font-size

动态设置HTML根字体大小 和 body 字体大小（lib_flexible.js）

• 将设计稿的宽（1920）平均分成 24 等份， 每一份为 80px。
• HTML字体大小就设置为 80 px，即1rem = 80px， 24rem = 1920px
• body字体大小设置为 16px。
• 安装 cssrem 插件， root font size 设置为 80px。
• 

方法二，使用CSS3中的scale函数来缩放网页

根元素

 .screen {display: inline-block;width: 1920px;  //设计稿的宽度height: 1080px;  //设计稿的高度transform-origin: 0 0;position: absolute;left: 50%;top: 50%;
}

react

  // useEffect(() => {//   const handleScreenAuto = () => {//     const designDraftWidth = 1920; // 设计稿的宽度//     const designDraftHeight = 1080; // 设计稿的高度//     // 根据屏幕的变化适配的比例//     const scale =document.documentElement.clientWidth /document.documentElement.clientHeight <designDraftWidth / designDraftHeight? document.documentElement.clientWidth / designDraftWidth: document.documentElement.clientHeight / designDraftHeight;//     const screenElement = document.querySelector('#screen') as HTMLElement;//     if (screenElement) {//       screenElement.style.transform = `scale(${scale}) translate(-50%, -50%)`;//     }//   };//   // 调用一次以确保初始样式正确设置//   handleScreenAuto();//   // 监听窗口大小变化事件，并触发自动适配函数//   window.onresize = handleScreenAuto;//   // 组件卸载时清除事件监听器//   return () => {//     window.onresize = null;//   };// }, []); // useEffect 依赖项为空数组，表示仅在组件挂载和卸载时执行一次

这种方法两侧可能会留白，用背景图填充上