目的：根据视窗大小自动调整字体

搜索解决方案：媒体查询 + rem

一、rem

1.什么是rem

相对于根元素的字体大小的尺寸单位

根元素是16px，1rem =16px、2rem = 32px

2.rem使用场景

用rem替代px，根据屏幕大小只需要调整根元素字体，rem的字体就会自动适配

二、媒体查询 @media

@media 可以针对不同媒体、不同视窗尺寸定义不同样式

通常用于不同设备的布局，无法达成完全自适应

over

再次搜索解决方案：用js控制根元素的像素

三、js控制根元素大小

代码：

实现代码

解读代码

document.addEventListener

HTML DOM方法，向文档添加事件句柄

参数：

event — —事件名称的字符串

function — — 事件触发后的执行函数 

userCaptrue — — （可选）布尔值 ，指定事件在捕获/冒泡阶段执行：

true捕获阶段，触发的监听事件会由window一层层向下传递到目标元素

false冒泡阶段，目标元素从window接收到事件后，会把他接收的事件传给自己的父级，直到window

通过window.innerWidth事件获取当前视窗宽度，声明一个分割比例。

用document.getElementsByTagName("html")[0]获取根元素

用element.style.cssText设置根元素的字体大小

用window.addEventListener给窗口添加监听事件resize当串口变化时执行函数

获取窗口宽度，重新定义根元素字体