關於字體隨屏幕分辨率改變自適應的問題

開發中遇到大屏小屏來回切換的問題。
因此會有字體大小自適應的需求

StoreFactory.tsx中

interface IContexxt {
    state:any,
    dispatch?:React.Dispatch<any> | undefined
}
export const createStore =(reducer:(state:any,action:any)=>object,defaultState:object,dispatchAction:any) =>{
    const Context = React.createContext<IContext>({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.onSize =() ={
            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);
}