大屏:页面在不同比例屏幕的显示适配与字体随屏幕改变而改变(字体随屏幕分辨率改变自适应的问题)
页面字体采用: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);
相关文章
- PostgreSQL安装之后pgAdmin 4无法显示,提示MIME类型为text/plain,无法执行的解决方法
- Java邮件开发(三):解决附件名为乱码及显示友好名称
- js实现只显示一个骰子页面,其余的不显示(HTML使用栅格布局实现六种筛子的样式)
- html页面pc显示正常,在手机端适配也可以看整个页面
- 97、进入ScrollView根布局页面,直接跳到页面底部,不能显示顶部内容
- RF使用ie浏览器访问页面,浏览器启动只显示This is the initial start page for the WebDriver server,页面访问失败
- Maven 电脑每次重启 mvn -v 都显示 不是命令
- Electron使用指南 - [13] 显示列表
- SAP ABAP Fiori Launchpad role based page - cached_sap_menu - 基于角色的页面显示原理
- SAP Spartacus产品明细页面用Observable显示产品名称
- SAP 电商云 Spartacus UI Quick order 产品搜索结果页面的显示逻辑
- 如何分析SAP CRM UI label显示成technical name的问题
- 如何让Spring MVC显示自定义的404 Not Found页面
- 在同一页面显示多个JavaScript统计图表
- Atitit.png 图片不能显示 php环境下
- html页面和Chrome开发者工具elements界面不一致的一个可能原因:没有在Chrome开发者工具里打开对Shadow DOM显示的支持
- 在生产环境中调试 Angular 应用程序而不显示源映射
- 腾讯低代码页面组件不显示修复办法
- 蓝桥杯官网 试题 PREV-281 历届真题 时间显示【第十二届】【省赛】【研究生组】【C++】【C】【Java】【Python】四种解法
- android app activity 页面全屏显示(隐藏导航栏状态栏)
- ASP.NET将原始图片按照指定尺寸等比例缩放显示图片
- 原生android webview 显示的H5页面颜色属性无法识别 - 具体解决心得
- 【Groovy】使用 SwingBuilder 构建 Swing 窗口 ( 创建一个 Swing 构造器 | 配置 Swing 窗口的一系列属性 | 设置 Swing 窗口显示 )
- 048:vue+openlayers鼠标click显示企业名片(代码示例)
- LabVIEW创建自定义输入控件、显示控件和自定义类型2
- Emacs代码折叠/显示(二十一)
- C#开发的OpenRA的OpenGL渲染显示
- 深入浅出matplotlib(80):多个子图绘图显示
- 使用命令xrandr设置当前系统的显示分辨率及显示的旋转脚本
- 从浏览器地址栏输入url到显示页面的过程
- Android 从drawable-hdpi中获取图标显示在ImageView上
- 笔记本电脑开机到登入页面扩展显示器和电脑突然黑屏很久才显示
- duilib中CTextUI控件设置文字时不刷新显示的bug