Large screen: the display adaptation and font of the page on different scale screens change with the screen change (the font changes adaptively with the screen resolution)

The page font is ：rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 1280 + ‘px’; I am here. 1280 Is the screen size of the current self written page . The setting here is really html The reference dimension of is 1px;
Then in the style , use rem Set the font
At this point, the font can change with the screen size

But here's another problem ： How about a square page , On a rectangular flat screen, it is displayed in equal proportion ： I will adopt the proportional method
1280 and 884 These are the screens I use for development at this time
That's about it .
Consider some components , such as echarts All fonts are based on px As the standard , At this point, you can write a method
Then call it in the component

There is a problem of switching back and forth between large and small screens in the development .
So there will be the need for font size adaptation

StoreFactory.tsx in

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 in

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 in

const UIWidth = 1920 // Design width
const RootFontSizeRate = 100 // rem px Conversion ratio

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);