Material UI 中的响应式排版？

Question

针对移动设计，设计通常具有较小的标题字体。

Material UI 是否有使版式响应的机制？

我看到默认主题的字体大小是在 rems 中定义的 - 这是否意味着只需减小基本字体大小即可？（这似乎不起作用，如果你想以不同的速率减少标题字体怎么办）。

Answer 1

更新

MUI v4 内置了响应式排版！请查看此处了解详情。

旧回复

@Luke的answer很棒。我想添加一些细节以使这项工作在实践中发挥作用，因为 breakpoints 和 pxToRem 都可以在主题对象上访问......使得这成为一个先有鸡还是先有蛋的问题！我的做法：

import { createMuiTheme } from "@material-ui/core"

const defaultTheme = createMuiTheme({ ... customisations that don’t rely on theme properties... })
const { breakpoints, typography: { pxToRem } } = defaultTheme

const theme = {
  ...defaultTheme,
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: "5rem",
        [breakpoints.down("xs")]: {
          fontSize: "3rem"
        }
      }
    }
  }
}

export default theme

Answer 2

其他答案均未使用

variant

预设。

MUI v5 的最佳方式，并使用

variant

:

<Typography sx={{ typography: { sm: 'body1', xs: 'body2' } }} >
    Hello world!
</Typography>

Answer 3

如文档中所述，您可以使用 responsiveFontSizes()

 帮助器使主题中的版式字体大小响应。

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

Answer 4

更新

最新版本的Material UI（v4）完全支持响应排版。详情请参阅

官方文档。

原答案

从版本 1.x 开始，Material UI 没有处理响应式排版的特定机制。

您可以通过更改

Typography

 元素的

font-size

 来缩放所有 MUI

<html>

 的大小，如您所提到的。 （

文档）

const styles = theme => ({
  "@global": {
    html: {
      [theme.breakpoints.up("sm")]: {
        fontSize: 18
      }
    }
  }
}

主题覆盖

据我所知，唯一的其他选择是使用主题覆盖来为每个

Typography

 变体定义自定义样式。

这需要复制

createTypography.js 中的一些逻辑（即设置行高以保持垂直节奏）

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      headline: {
        fontSize: pxToRem(24),
        [breakpoints.up("md")]: {
          fontSize: pxToRem(32)
        }
      }
    }
  }

Answer 5

MUI v5向所有支持响应值的MUI组件添加了

sx prop，您可以在其中传递一个对象来定义不同断点处的值：

<Typography
  sx={{
    fontSize: {
      lg: 30,
      md: 20,
      sm: 15,
      xs: 10
    }
  }}
>
  This text is resized on different screen breakpoints
</Typography>

与

Box

类似，

Typography

也支持

系统属性，因此您可以跳过sx

属性并直接传递

fontSize

属性。下面的代码和上面一样，只是写起来短了一点：

<Typography
  fontSize={{
    lg: 30,
    md: 20,
    sm: 15,
    xs: 10
  }}
>
  This text is resized on different screen breakpoints
</Typography>

Answer 6

我的 v5 方法

import { createTheme } from "@mui/material";

let theme = createTheme({
  // ...
});

theme = createTheme(theme, {
  typography: {
    h1: {
      fontSize: 53,
      [theme.breakpoints.only("sm")]: {
        fontSize: 71,
      },
    },
  },
});
export default theme;

Answer 7

这似乎对我有用 v5

在 App.js 中

...

import {
  createTheme,
  responsiveFontSizes,
  ThemeProvider,
} from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

...

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Router>
       .....
      </Router>
    </ThemeProvider>
  );
}

“要自动化此设置，您可以使用responsiveFontSizes()帮助程序使主题中的版式字体大小响应。”

https://mui.com/customization/typography/#responsive-font-sizes

Answer 8

我通过使用 Typescript 实现 Mui v5 成功解决了响应断点问题。

import { DM_Sans } from "next/font/google";
import {
  TypographyVariants as TypographyVariantsOption,
  createTheme,
} from "@mui/material/styles";

export const dm_sans = DM_Sans({
  weight: ["100", "300", "400", "500", "600", "700"],
  style: ["normal", "italic"],
  subsets: ["latin"],
  display: "swap",
});

export interface TypographyVariants extends TypographyVariantsOption {}

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1170,
      xl: 1530,
    },
  },
});

export default {
  fontFamily: `${dm_sans.style.fontFamily}`,
  htmlFontSize: 16,
  fontSize: 14,
  fontWeightLight: 300,
  fontWeightRegular: 400,
  fontWeightMedium: 500,
  fontWeightBold: 700,
  h1: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "3.5rem",
    lineHeight: 1.167,
    letterSpacing: "-0.02em",
    [theme.breakpoints.down("md")]: {
      fontSize: "2rem",
    },
  },
  h2: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "2.5rem",
    lineHeight: 1.263157895,
    letterSpacing: "-0.013",
  },
  h3: {
    ...dm_sans.style,
    fontWeight: 400,
    fontSize: "1.62rem",
    lineHeight: 1.384615385,
    letterSpacing: "0em",
  },
  h4: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "1.5rem",
    lineHeight: 1.33333,
    letterSpacing: "0.006",
  },
  h5: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "1.25rem",
    lineHeight: 1.334,
    letterSpacing: "0em",
  },
  h6: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "1.125rem",
    lineHeight: 1.6,
    letterSpacing: "0.0075em",
  },
  subtitle1: {
    ...dm_sans.style,
    fontWeight: 400,
    fontSize: "1.125rem",
    lineHeight: 1.75,
    letterSpacing: "0.013em",
  },
  subtitle2: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "1rem",
    lineHeight: 1.57,
    letterSpacing: "0.013em",
  },
  body1: {
    ...dm_sans.style,
    fontWeight: 300,
    fontSize: "1.125rem",
    lineHeight: 1.555555556,
    letterSpacing: "0.013em",
  },
  body2: {
    ...dm_sans.style,
    fontWeight: 400,
    fontSize: "0.938rem",
    lineHeight: 1.4,
    letterSpacing: "0.01071em",
  },
  button: {
    ...dm_sans.style,
    fontWeight: 500,
    fontSize: "0.938rem",
    lineHeight: 1.6,
    letterSpacing: "0.013em",
    textTransform: "uppercase",
  },
  caption: {
    ...dm_sans.style,
    fontWeight: 400,
    fontSize: "0.938rem",
    lineHeight: 1.6,
    letterSpacing: "0.01875em",
  },
  overline: {
    ...dm_sans.style,
    fontWeight: 400,
    fontSize: "0.688rem",
    lineHeight: 2.66,
    letterSpacing: "0.013em",
    textTransform: "uppercase",
  },
} as TypographyVariants;

Material UI 中的响应式排版？

问题描述投票：0回答：8

8个回答

最新问题

Material UI 中的响应式排版？

问题描述 投票：0回答：8

8个回答

最新问题

问题描述投票：0回答：8