react项目网页端适配（利用自定义hooks）

思路就是利用window的resize事件，监听窗口变化，再利用hooks函数，在生命周期创建前监听，在生命周期结束时取消监听。具体看代码

这个useLifecycles是react-use的一个模仿组件的componentDidMount，和componentWillUnmount。也可以利用useEffect(()=>{},[])代替，接着就是监听window的resize事件，然后触发serRemFunc函数。
再看看setRemFunc的实现。

思路是，封装一个类，传入设计稿大小，要转换的比例，如图

然后class上面定义一个方法，setRem，拿到最新的窗口大小，并计算将值赋予到html,style.fontSize上。这样就实现一个适配效果。
具体原理就是：
假设倍数为10，设计稿宽度为2000px，屏幕真实宽度为1000px。设计稿纸上一个有10px大小的字体A。
我们借助postcsss-loader帮助我们转换rem。

规则就是1rem=10px，webpack不知道我们屏幕的宽度，只会按照这个逻辑去转。
我们在1000px的屏幕上开发，写A的时候，依然写的是10px。他会被loader转为1rem。此时1000px伤的html.style.fontSize = 1000/2000 * 10 = 5px，所以在1000px的屏幕上，1rem就是5px。
在2000px上的时候，html.style.fontSize = 2000/2000 * 10 = 10px。所以在2000px上,1rem就是10px。以此达到适配的效果。
这个hooks只是用来改变每个屏幕的rem的大小，具体开发的时候，我们依然可以在1000px上的屏幕开发2000px的设计稿，px保持不变。因为postcss-loader会帮助我们转化为rem。rem通过hooks会在不同的屏幕上适配。
注意，这个postcss-loader转化rem的标准需要与

这个倍数一样。因为真实宽度/设计宽度只是计算出比例。1rem多少需要后面这个prem决定。

用的时候只需要实例出一个对象即可。
第一次进去需要调用一次setRemFunc，初始化一下fontSize。

接着用的时候就直接
引入并调用即可。
看看效果

可以看到，当我们窗口大小变化时就可以自适应了。