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 的项目。

我尝试在我的样式中为位于<AppBar>组件内的<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>
  );
}

Answer 2

描述
您可以组合媒体查询。 但是你必须注意语法：

Commata ,将用逻辑 OR 分隔媒体查询（例如 a: true, b: false => true）它就像一个参数枚举（在这种情况下：媒体查询）
and将逻辑地组合两个参数（例如：真，B：假=>假）
还有其他关键字，例如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>

Answer 3

尝试使用“vh”和“vw”以及你的大小单位而不是“px”，

vh 表示 veiwport 高度，

vw 表示 veiwport 宽度。

7vh 意味着 7% 的 veiwport

Answer 4

我建议使用材料 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>
);

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

问题描述

4 个解决方案

解决方案1
3 2020-11-28 05:58:55

解释：

解决方案2
1 2020-11-27 14:42:22

解决方案3
0

解决方案4
0 2021-12-31 04:42:12

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

问题描述

4 个解决方案

解决方案1 3 2020-11-28 05:58:55

解释：

解决方案2 1 2020-11-27 14:42:22

解决方案3 0

解决方案4 0 2021-12-31 04:42:12

解决方案1
3 2020-11-28 05:58:55

解决方案2
1 2020-11-27 14:42:22

解决方案3
0

解决方案4
0 2021-12-31 04:42:12