代码之家 › 专栏 › 技术社区 › dwjohnston

材料用户界面中的响应式排版?

typography material-ui responsive-design

dwjohnston · 技术社区 · 6 年前

手机设计通常使用较小的标题字体。

MUI是否有一种机制可以使排版更具响应性?

我看到默认主题的字体大小是在rems中定义的——这是否意味着只是缩小基本字体大小的问题?(这似乎不起作用,如果你想以不同的速度减少标题字体怎么办)。

2 回复 | 直到 3 年前

Tomerikoo Glorified 3 年前

使现代化

MUI v4内置了响应性强的字体设计!检查 here 详细信息。

旧的反应

@Luke 是的 answer 太棒了。我想添加一些细节,使其在实践中发挥作用,因为断点和 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

Tomerikoo Glorified 3 年前

其他答案都没有使用 variant 预设。

使用MUI v5的最佳方式 变种 :

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

thisismydesign 4 年前

如上所述 in the docs 你可以使用 responsiveFontSizes() 帮助使主题中的排版字体大小具有响应性。

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

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

Calypso 2 年前

我的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;

NearHuscarl 3 年前

梅v5 加上 sx prop 适用于所有支持 responsive values 可以传递对象以定义不同断点处的值:

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

类似 Box , Typography 也支持 system properties 所以你可以跳过 sx 撑住并传球 fontSize 直接的财产。下面的代码与上面的代码相同,只是要写得短一点:

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

Luke Peavey 5 年前

使现代化

最新版本的Material UI(v4)完全支持响应排版。看到了吗 official documentation 详细信息。

原始答案

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

您可以缩放所有MUI的大小 Typography 通过改变 font-size 关于 <html> 元素,正如你提到的。( docs )

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

主题覆盖

据我所知,唯一的另一种选择是使用主题替代来定义每个主题的自定义样式 印刷术 变种。

这需要复制中的一些逻辑 createTypography.js (即设置线条高度以保持垂直节奏)

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

atazmin 3 年前

这似乎对我有用

应用程序内。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