css - 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 覆盖背景颜色当它有屏幕时 width: 414px和 height: 628px .

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

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

尝试在输出窗口中调整屏幕大小，您会看到媒体查询影响样式。

说明:

确保您遵循以下两点:

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