Adaptación Rem en PC-side React

index.htmlAgregar al principio del archivo de entrada

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

Escriba un método para monitorear el cambio de tamaño de la ventana

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';
}

Agregue el método anterior a la función del ciclo de vida de reaccionar

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

Agregué un poco de juicio en el proyecto
porque quiero que el
tamaño de la fuente font-sziesea ​​un poco más grande cuando la ventana se haga más pequeña.
Si tiene una mejor solución, puede dejarme un mensaje o un mensaje privado. Muchas gracias.
No sé si lo haré en este momento. Hay otros problemas

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';
}

Cálculo font-sizelógica es:
si el diseño es 1920establecer htmlel font-sizevalor de 100
es decir, cuando la ventana 1920pxmientras que 1rem = 100px
si un componente en el conjunto font-sizees 18pxentonces remel valor se establece .18rem
cuando la ventana se ajusta a la no-diseño 1920anchura de htmlla font-sizevalor será un correspondiente Cambiar
esto se puede ver en la impresión de la consola