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の設定値と、ウィンドウ、それをさせながらセット内の成分があればされ、次に値が設定されているウィンドウが非設計に調整されたときの幅値が対応するであろうこれを変更して、コンソール印刷で確認できますhtmlfont-size100
1920px1rem = 100px
font-size18pxrem.18rem
1920htmlfont-size