大屏：页面在不同比例屏幕的显示适配与字体随屏幕改变而改变（字体随屏幕分辨率改变自适应的问题）

页面字体采用：rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 1280 + ‘px’;我这里的1280是目前自己写页面的屏幕尺寸。这里设置真个html的参考尺寸是1px；
然后在样式中，采用rem进行字体设置
此时字体就可以随屏幕大小改变而改变了

但此时又有一个问题：一个正方形页面如何，在一个长方形平屏幕等比例显示呢：我就采用比例的方式
1280和884都是此时我开发用的屏幕
大概就是这样。
考虑到一些组件，比如echarts字体都是以px为标准，此时可以写一个方法
然后在组件中调用就可以了

开发中遇到大屏小屏来回切换的问题。
所以会有字体大小自适应的需求

StoreFactory.tsx中

interface IContexxt {
state:any,
dispatch?:React.Dispatch | undefined
}
export const createStore =(reducer:(state:any,action:any)=>object,defaultState:object,dispatchAction:any) =>{
const Context = React.createContext({state:defaultState});
const useAction = () =>{
const {dispatch} = useContext(Context);
return dispatchAction(dispatch);
}
}
return {useAction};
appStore.ts中

import {createStore} from ‘./storeFactory’;
import {appReducer,defaultState} from ‘./reduce’;
import {dispatchAction} from ‘./action’;
const {useAction,withStore,useStore} = createStore(appReducer,defaultState,dispatchAction);

export {withStore,useStore as useAppStore,useAction as useAppAction};

App.tsx中

const UIWidth = 1920 // 设计稿宽度
const RootFontSizeRate = 100 // rem px换算比例

const App: React.FC = () =>{
const action = useAppAction();
useEffect(()=>{
setRootFontsize();
window.onresize =() ={
setRootFontSize()
}
return ()={
widow.onresize = null;
}

},[])

}

const setRootFontSize = ()=>{
const {clientWidth} = document.documentElement;
const rootFontSize = clientWidth/UIWidth* RootFontSizeRate;
document.documentElement.style.fontsize = ${rootFontSize}px
action.setRootFontSize(rootFontSize);