PC端 React 中 Rem自适应

在入口文件

index.html

头部加入

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

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

值也会相应的变化

这个可以在控制台打印看到