Material-ui 中的设备宽度和高度

Question

我试图仅添加（Iphone 7 Plus）的特定宽度和高度。对于我正在使用 withStyles 的项目。

import { withStyles } from "@material-ui/core";

我尝试使用：

"@media (width: 414px) and (height: 628px)": {}

我尝试了"@media (device-width: 414px) and (device-height: 628px)": {} 两个例子但不起作用。有人有任何想法如何去做吗？谢谢

Answer 1

您的媒体查询没有任何问题，但您没有提供完整的代码，因此我怀疑您在错误的位置编写了媒体查询，或者可能滥用了withStyles().

所以现在我正在开发一个使用 Material UI 的项目。

我尝试在我的样式中添加您指定的媒体查询，该查询<Toolbar>驻留在<AppBar>组件内。默认情况下，工具栏使用深蓝色作为背景色（在全局主题内设置）。

当媒体查询#000具有 screenwidth: 414px和时，它将覆盖背景颜色height: 628px。

以下是适合您的工作代码，使用 MUI 文档中的模板创建并在样式中添加了媒体查询：

https://codesandbox.io/s/jolly-elgamal-83von?file=/src/App.js&resolutionWidth=414&resolutionHeight=628

尝试调整输出窗口中的屏幕尺寸，您将看到媒体查询影响样式。

解释：

确保您遵循以下两件事：

• 我使用的是makeStyles()hook，而你使用的是withStyles()，这两者之间没有任何区别。但请确保，如果您有函数组件，那么您应该使用makeStyles()并useStyles()挂钩调用来应用样式，否则，如果您使用类组件，那么您可以随心所欲withStyles()。
• 另外，请确保您没有像我们在 CSS 中那样使用媒体查询。您需要在类中使用它，这里我的类是toolbar样式中的关键。用作组件className={styles.toolbar}的a <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>
  );
}