Adaptation Rem dans PC-side React

index.htmlAjouter en tête du fichier d'entrée

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

Écrire une méthode pour surveiller le changement de taille de la fenêtre

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

Ajouter la méthode ci-dessus à la fonction de cycle de vie de React

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

J'ai ajouté un peu de jugement dans le projet
car je veux que la
taille de la police font-sziesoit légèrement plus grande lorsque la fenêtre devient plus petite.
Si vous avez une meilleure solution, vous pouvez me laisser un message ou un message privé. Merci beaucoup.
Je ne sais pas si je vais le faire pour le moment. Il y a d'autres problèmes

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

Calcul font-sizelogique est la suivante :
si le dessin est 1920mise à htmlla font-sizevaleur de 100
ce qui est, lorsque la fenêtre 1920pxtandis que 1rem = 100px
si un composant de l'ensemble font-sizeest 18pxalors remla valeur est définie .18rem
lorsque la fenêtre est adaptée à la non-conception 1920largeur de htmlla font-sizevaleur sera un correspondant Changer
cela peut être vu dans l'impression de la console