要在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 依赖项为空数组，表示仅在组件挂载和卸载时执行一次这种方法两侧可能会留白，用背景图填充上
