代码
就是设置浏览器字体，从而实现根据屏幕动态计算大小
<script>
const WIDTH = 750; // 设计图尺寸
const setView = () => {
document.documentElement.style.fontSize = screen.width / WIDTH + "px";
};
window.onorientationchange = setView;
setView();
</script>
在使用时，1rem 即 1px，然后在不同窗口尺寸下的内容也是自适应的。另外有一个好处是，文字大小不会随着屏幕变的非常小。
示例
iphone SE（小屏）
- 这里我的比例是 1:10（即 1rem === 10px）
在计算样式时，宽高则是 165 * 110
iphone 12 （中等屏幕）
- 样式计算得到的宽高也会等比增大
三星 S22U（大屏）
- 将近 420宽度
ipaid Air（超大屏）
- 宽高分别为 360+ / 240+
关于文字大小
这里因为是动态 rem，文字在小屏中不会出现绝对的按比例放大缩小的情况，可以从效果图中看出文字基本都是适配的。
