高分辨率的响应字体大小在 MUI 5 中不起作用

Question

我在我的 React 应用程序中使用 Material UI v5。

并使用 responsiveFontSizes 根据收到的选项生成响应式排版设置。

因此，responsiveFontSizes 适用于所有设备尺寸，但仅适用于默认 Material UI 断点。

enter image description here

2560 * 1440、2340 * 1080 甚至 3200 * 1440 等高分辨率或超高分辨率设备上的字体大小根本不起作用。

它们看起来很小。

如果我查看检查模式，我可以看到带有 h3 的排版最大 2.9991rem。

enter image description here

我在 Container.

中使用的所有排版组件

<Container maxWidth="md">
  <Typography variant="h1">h1 test</Typography>
  ...
</Container>

如何使响应式字体大小也适用于高分辨率设备？

Answer 1

我遇到了同样的问题。如果您检查 https://mui.com/customization/typography/#responsive-font-sizes，则有图表显示 responsiveFontSizes() 的显示方式。基本上在较低的屏幕分辨率下，与较低的字体大小相比，较高的字体大小缩小得更快。所以我一起跳过了 responsiveFontSizes()。

我用 rem 单位 w.r.t 1024px 媒体断点编写了我的自定义排版标签。在 index.css 添加断点以增加 html font-size

选项 1：屏幕分辨率从低到高

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%;
    }
  };

选项 2：响应式字体大小（从高到低的屏幕大小）： 为此，您必须根据最高分辨率设置 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>
  );
}

高分辨率的响应字体大小在 MUI 5 中不起作用

Responsive font size for high resolutions not working in MUI 5

font-size

reactjs

material-ui