material-ui中的设备宽高
Posted
技术标签:
【中文标题】material-ui中的设备宽高【英文标题】：Device width and height in material-ui 【发布时间】：2021-03-05 16:11:08 【问题描述】：我正在尝试仅添加 (Iphone 7 Plus) 的特定宽度和高度。对于我正在使用 withStyles 的项目。
import withStyles from "@material-ui/core";
我尝试使用：
"@media (width: 414px) and (height: 628px)":
我试过"@media (device-width: 414px) and (device-height: 628px)":
尝试了这两个示例，但均无效。有人知道怎么做吗？谢谢
【问题讨论】：
我已经为您的问题提供了解决方案。请看一看。 看看断点material-ui.com/customization/breakpoints 【参考方案1】：我建议使用材质 ui 断点：https://mui.com/customization/breakpoints/#custom-breakpoints
尝试为该设备创建一个特定的断点： 即
const theme = createTheme(
breakpoints:
values:
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200,
,
,
);
假设您添加了iphone 断点，然后为该特定断点添加css 规则使用theme.breakpoints.only(key) => media query ：
const useStyles = makeStyles(theme => (
paper:
[theme.breakpoints.only('iphone')]:
backgroundColor: 'red',
,
));
然后在你的功能上：
...
const classes = useStyles()
return (
<Paper className=classes.paper>
</Paper>
);
【讨论】：
【参考方案2】：您的媒体查询没有任何问题，但您没有提供完整的代码，所以我怀疑您在错误的地方编写媒体查询或者可能滥用了withStyles()。
所以现在我正在开发一个使用 Material UI 的项目。
我尝试为位于<AppBar> 组件内的<Toolbar> 添加您在我的样式中指定的媒体查询。默认情况下，工具栏使用深蓝色作为背景颜色（在全局主题内设置）。
当有屏幕width: 414px 和height: 628px 时，媒体查询将使用#000 覆盖背景颜色。
这是为您提供的工作代码，使用 MUI 文档中的模板创建并在样式中添加了媒体查询：
https://codesandbox.io/s/jolly-elgamal-83von?file=/src/App.js&resolutionWidth=414&resolutionHeight=628
尝试在输出窗口中调整屏幕大小，您会看到媒体查询会影响样式。
解释：
确保您遵循以下两点：
我使用makeStyles()钩子，而你使用withStyles()，这两者之间没有任何区别。但是请确保如果您有函数组件，那么您应该使用makeStyles() 和useStyles() 钩子调用来应用样式，否则如果您使用的是类组件，那么您可以使用withStyles() 方式。
另外，请确保您没有像我们在 CSS 中那样使用媒体查询。你需要在课堂上使用它，我的课堂是toolbar，这是样式中的关键。用作<Toolbar> 组件的className=styles.toolbar。
这是我的代码：
function Navbar()
const useStyles = makeStyles(() => (
toolbar:
'@media (width: 414px) and (height: 628px)':
background: '#000',
,
,
));
const styles = useStyles();
return (
<AppBar position="static">
<Toolbar className=styles.toolbar>
</Toolbar>
</AppBar>
);
【讨论】：
【参考方案3】：说明 您可以组合媒体查询。但是你必须知道语法：
逗号, 将使用逻辑或分隔媒体查询（例如a：true，b：false => true）它就像一个参数枚举（在这种情况下：媒体查询）
and 将逻辑组合两个参数（例如 a: true, b: false => false）
还有其他关键字，例如not、only、orientation: landscape、orientation: portrait，您可能也想了解它们（注意：此列表可能不完整）
我想这就是你想要的：
可执行的解决方案 您可以在下面找到解决方案。请注意，它只会在确切的屏幕尺寸下触发。您可能需要调整窗口大小。在 Firefox/Chrome 中，有一个屏幕尺寸调试器，您可以在其中为窗口设置特定尺寸。
*
box-sizing: border-box;
html,
body
margin: 0;
padding: 0;
.container
width: 414px;
height: 628px;
background-color: grey;
/* specific iphone7 style */
@media (min-width: 375px) and (max-width: 375px) and (min-height: 733px) and (max-height: 733px),
(min-width: 414px) and (max-width: 414px) and (min-height: 628px) and (max-height: 628px)
.container-iphone7
background-color: purple;
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="container container-iphone7">
only styled at 414x628 or 375x733
</div>
</body>
</html>【讨论】：
【参考方案4】：尝试使用“vh”和“vw”以及你的大小单位而不是“px”，
vh 表示视口高度，
vw 表示视口宽度。
7vh 表示视口的 7%
【讨论】：
不工作，我正在使用 withStyles (material-ui)，我试过 vh 和 vw，还是一样的事情不工作 我也尝试使用自定义断点。 [theme.breakpoints.up()] 但仍然无法为不同的移动屏幕制作唯一的高度和宽度。以上是关于material-ui中的设备宽高的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Material-UI 中的 useTheme 钩子？