使用scale自适应PC端页面

背景

如果遇到要求一屏一页切换效果的需求，需要设计稿按照设计规范设计安全区域。

但是在页面内容过多，设计稿没有按照安全区域规范给图的情况下，容易造成页面内容展示不全的问题。

---

介绍

针对PC端内容展示不全的问题，这次使用scale做适配，实现页面在不同分辨率的电脑上可以正常展示。不需要特定编写rem单位，也不需要考虑单位使用失误导致适配不完全。即使全部用position去定位在其他屏幕上都不会乱。（%和px都可以用）
效果如下：

屏幕录制2023-04-20 14.35.50

​​​​​​​

---

如何使用

提示：做法非常简单了，只需要复制就好。

1. js部分

   interface IScaleContainerProps {
     bg?: string; //背景图
     showLogin?: boolean; //是否展示登录信息
     pageWidth?: number; //设计稿的宽度
     pageHeight?: number; //设计稿的高度
     containerClassName?: string;
   }
   
   const Scale