PC端 React 中 Rem自适应

在入口文件index.html头部加入

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

写一个监听窗口大小变化的方法

resizeListener(){
	// 定义设计图的尺寸 1920
	let designSize = 1920;
	// 获取 html 元素
	let html = document.documentElement;
	// 定义窗口的宽度
	let clientW = html.clientWidth;
	// html 的fontsize 大小
	let htmlRem = clientW * 100 / designSize;
	html.style.fontSize = htmlRem + 'px';
}

在 react 的生命周期函数里 加上上面写的方法

// 在第一次渲染后调用
componentDidMount(){
	window.addEventListener('resize', this.resizeListener);
	this.resizeListener();
}
// 在组件从 DOM 中移除之前立刻被调用
componentWillUnmount(){
	window.removeEventListener('resize', this.resizeListener);
}

我在项目中加了点判断
因为想要在窗口变小的时候
字体的font-szie能够稍微大一点
如果你有更好的解决方法 可以给我留言 或者私信我 非常感谢
目前我也不知道我这样会不会出现其他问题

resizeListener(){
	// 定义设计图的尺寸 1920
	let designSize = 1920;
	// 获取 html 元素
	let html = document.documentElement;
	// 定义窗口的宽度
	let clientW = html.clientWidth;
	let sizeNum = 100;
    if(clientW <= 1360){
      sizeNum = 130
    }else if(clientW <= 1400){
      sizeNum = 120
    }else if(clientW <= 1600){
      sizeNum = 110
    }
	// html 的fontsize 大小
	let htmlRem = clientW * sizeNum / designSize;
	html.style.fontSize = htmlRem + 'px';
}

计算 font-size的逻辑是：
当设计图是 1920 时 设置 html 的 font-size 的值为 100
也就是说 当窗口为 1920px 时 1rem = 100px
如果设置一个组件里的font-size为 18px 那么rem设置的值是 .18rem
当窗口调整到非设计图 1920 的宽度时 html 的font-size值也会相应的变化
这个可以在控制台打印看到