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

Posted 2022-07-20 格格巫 MMQ!!

页面字体采用：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 = $rootFontSizepx
action.setRootFontSize(rootFontSize);