思路
- 我们要求页面一打开就获取屏幕大小，通过计算设置尺寸及字体大小。
- 我们当页面分辨率修改后（拖动、或者分辨率转换）我们也需要设置其尺寸和大小。
鉴于以上两种需求。我们可以提炼出。
-
我们需要一个监测屏幕分辨率的方法。
-
我们的页面尺寸需要使用rem来进行编写。
-
我们需要根据屏幕情况来动态设置font-size
然后写入动态设置字体大小的方法：
上述代码中，我们首先获取屏幕的大小，以1920 为主。1920分辨率下默认font-size设置为16px。
接下来我们再写一个方法用来监测电脑分辨率。window.onload
window.onload 方法的意思是用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。也就是页面初始化的时候去加载。页面一加载完的时候，我们需要去给window的 onresize 绑定一个方法。
window.onresize的意思是，当监测到屏幕分辨率变的时候。所以我们需要一个操作就是，页面一加载完成，我们给window.onresize 绑定一个方法。这个方法只绑定一次，而不需要每次都去绑定。这样的话，当每次屏幕分辨率改变的时候，都会去执行 resize 这个方法。
那么这个方法里我们应该做些什么呢？那就是调用我们第一步做的 calcFontSize 这个方法，修改整个document的font-size 属性。
当我们拖动浏览器改变电脑分辨率后，就会重新设置font-size
最后我们做一下防抖处理，来达到短时间内只触发一次的效果。
完整代码如下：
