响应字体大小高分辨率不工作在MUI 5
我在我的React应用程序中使用材料UI v5。
并使用responsiveFontSizes根据接收到的选项生成响应性的排版设置。
因此，responsiveFontSizes对于所有设备大小都很好，但只适用于默认的资料UI断点。
在像2560 * 1440,2340 * 1080甚至3200 * 1440这样的高分辨率或超高分辨率设备上的字体大小根本无法工作。
它们看起来很小。
如果我查看检查模式，那么我可以看到一个带有h3的排版，2.9991rem是最大的。
我在容器中使用的所有排版组件。
<Container maxWidth="md">
<Typography variant="h1">h1 test</Typography>
...
</Container>如何使responsiveFontSizes也能在高分辨率设备上工作？
回答 1
Stack Overflow用户
发布于 2022-02-02 20:10:41
我也面临过同样的问题。如果您检查https://mui.com/customization/typography/#responsive-font-sizes，就会看到显示responsiveFontSizes()显示方式的图表。基本上，在较低的屏幕分辨率，更高的字体尺寸收缩速度比较低的字体尺寸。所以我一起跳过了responsiveFontSizes()。
我用rem单元w.r.t1024px媒体断点编写了自定义的排版标签。index.css中添加的断点以增加html font-size
Option1:低到高屏幕分辨率
App.js
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import './index.css';
const theme = createTheme({
typography: {
h1: {
fontWeight: 600,
fontSize: '2.25rem',
lineHeight: 2.75,
},
h2: {
fontWeight: 600,
fontSize: '1.625rem',
lineHeight: 2.125,
},
...
},
});
export default function MyApp() {
return (
<ThemeProvider theme={theme}>
<Typography variant="h1" color="primary">Heading 1</Typography>
<Typography variant="h2" color="primary">Heading 2</Typography>
</ThemeProvider>
);
}index.css
@media only screen and (min-width: 1024px) {
html {
font-size: 100%;
}
};
@media only screen and (min-width: 1280px) {
html {
font-size: 125%;
}
};
@media only screen and (min-width: 1536px) {
html {
font-size: 150%;
}
};
@media only screen and (min-width: 1920px) {
html {
font-size: 187.5%;
}
};Options2:对于responsiveFontSizes (较高到较低的scrensize) :，您必须根据最高分辨率设置typography fontsize。检查https://mui.com/customization/theming/#responsivefontsizes-theme-options-theme的其他选项和进一步的调整。
import * as React from 'react';
import { createTheme, ThemeProvider, responsiveFontSizes } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
const theme = createTheme({
typography: {
h1: { fontSize: '5rem' },
},
breakpoints: {
values: {
xs: 0,
sm: 425,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536,
'3xl': 1920,
'4xl': 2560,
'5xl': 3200,
},
},
});
export default function MyApp() {
return (
<ThemeProvider theme={responsiveFontSizes(theme, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], factor: 5 })}>
<Typography variant="h1" color="primary">
Heading 1
</Typography>
<Typography variant="h6" color="primary">
Heading 6
</Typography>
<Typography variant="body1" color="primary">
Body 1
</Typography>
</ThemeProvider>
);
}https://stackoverflow.com/questions/70952554
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号