在移动设计中，常见的设计是使用较小的标题字体。
Material UI 是否有一种机制可以使排版具有响应性？
我看到默认主题中定义了以 rems 为单位的字体大小 - 这是否意味着只需减小基础字体大小即可？（这似乎行不通，如果您想以不同的比率减小标题字体怎么办）。
7个回答
48
更新
MUI v4内置响应式字体！详情请查看此处。
旧回答
@Luke的回答很好。我想添加一些细节，以使其在实际中起作用，因为断点和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
- Tim Holmes-Mitra
41
其他答案都没有使用variant预设。
MUI v5的最佳方式是使用variant：
<Typography sx={{ typography: { sm: 'body1', xs: 'body2' } }} >
Hello world!
</Typography>
- gaohomway
4
这是最好的方式。谢谢。 - user2601376
这个有效，谢谢...在此之前，我直接将断点应用于“variant”参数，它改变了大小，但奇怪的是，它也以某种原因将它们的字体系列更改回默认的Roboto。 - DooMGuy096
1注意：由于它仅适用于样式，因此它实际上不会更改变量属性，因此也不会更改类名。 - MonstraG
如果您从h1到h3，对可访问性有任何影响吗？它只会影响样式而不是更改Typography组件吗？ - Chris GW Green
20
如文档中描述的，您可以使用responsiveFontSizes（）助手使主题中的Typography字体大小响应。
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
- thisismydesign
3
https://mui.com/customization/typography/#responsive-font-sizes - Akshay K Nair
这是最简单的方法。+1 推荐这种方法。 - lmurdock12
这必须是最佳答案。 - codeprose-sam
18
更新
最新版本的Material UI（v4）完全支持响应式字体。详情请参见官方文档。
翻译后的答案
从1.x版本开始，Material UI没有专门处理响应式字体的机制。
您可以通过更改<html>元素的font-size来缩放所有MUI Typography的大小，正如您所提到的一样。（文档）
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)
}
}
}
}
- Luke Peavey
3
4好的，谢谢您。请问为什么Material-UI中没有响应式字体的功能呢？这似乎是一个很明显的需求。 - dwjohnston
1你的第二段代码中的
breakpoints 变量是从哪里来的？我知道它应该来自一个主题，但这正是你正在创建的东西，在你使用 breakpoints 的时候还没有被创建。 - Christiaan Westerbeek这是正确的答案。感谢分享，Luke！ - danielrvt
14
MUI v5增加了sx属性到所有支持响应式值的MUI组件中，你可以传递一个对象来定义不同断点处的值：
<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>
- NearHuscarl
1
1这个答案非常适合在响应式设计中需要进行的小调整。例如，在移动视图中可能不应该显示某个图片。感谢分享。 - RollingInTheDeep
7
我的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;
- Calypso
4
这对我来说似乎是有效的 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()助手将主题中的Typography字体大小响应式处理。" https://mui.com/customization/typography/#responsive-font-sizes
- atazmin
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接