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

Question

I am trying to add the specific width and height of (Iphone 7 Plus) only.我正在尝试仅添加（Iphone 7 Plus）的特定宽度和高度。 For the project I am using withStyles.对于我使用 withStyles 的项目。

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

I tried using:我尝试使用：

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

I tried "@media (device-width: 414px) and (device-height: 628px)": {} Tried both examples and is not working.我尝试了"@media (device-width: 414px) and (device-height: 628px)": {}尝试了两个示例，但都不起作用。 Does someone have any ideas how to do it?有人有任何想法如何做到吗？ Thank you谢谢

Answer 1

There is nothing wrong in your media query, but you haven't provided the full code, so I'm suspecting that either you are writing the media query in the wrong place or might have misused the withStyles() .您的媒体查询没有任何问题，但是您没有提供完整的代码，所以我怀疑您在错误的地方编写了媒体查询，或者可能误用了withStyles() 。

So right now I'm working on a project which uses Material UI.所以现在我正在做一个使用 Material UI 的项目。

I tried adding media query specified by you in my styles for the <Toolbar> which resides inside the <AppBar> component.我尝试在我的样式中为位于<AppBar>组件内的<AppBar> <Toolbar>添加您指定的媒体查询。 By default the toolbar is using the dark blue accent as a background color (set inside the global theme).默认情况下，工具栏使用深蓝色作为背景颜色（在全局主题内设置）。

The media query will override the background color with #000 when it has screen width: 414px and height: 628px .当屏幕width: 414px和height: 628px时，媒体查询将使用#000覆盖背景颜色。

Here's the working code for you, created using a template from MUI docs and added media query in the styles:这是您的工作代码，使用来自 MUI 文档的模板创建并在样式中添加了媒体查询：

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

Try adjusting the screen size in the output window, you'll see media query affecting the styles.尝试在输出窗口中调整屏幕大小，您将看到影响样式的媒体查询。

Explanation:解释：

Make sure you are following these two things:确保您遵循以下两点：

I am using makeStyles() hook, whereas you are using withStyles() , doesn't have any difference between these two.我使用的是makeStyles()钩子，而您使用的是withStyles() ，这两者之间没有任何区别。 But make sure that if you have function component then you should use makeStyles() and useStyles() hook calls to apply styles, Or else if you are using class component then you can go with withStyles() way.但是请确保如果您有函数组件，那么您应该使用makeStyles()和useStyles()钩子调用来应用样式，否则如果您使用的是类组件，那么您可以使用withStyles()方式。
Also, make sure that you are not using the media-queries like we do it in the CSS.另外，请确保您没有像我们在 CSS 中那样使用媒体查询。 You need to use it inside the class, here my class is toolbar which is key inside the styles.您需要在类中使用它，这里我的类是toolbar ，它是样式中的关键。 Used as a className={styles.toolbar} for the <Toolbar> component.用作<Toolbar>组件的className={styles.toolbar} 。

Here's my code:这是我的代码：

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

Description描述
You can combine media queries.您可以组合媒体查询。 But you have to be aware of the syntax:但是你必须注意语法：

Commata , will separate the media-queries with a logical OR (eg a: true, b: false => true) it is like an enumeration of arguments (in this case: media queries) Commata ,将用逻辑 OR 分隔媒体查询（例如 a: true, b: false => true）它就像一个参数枚举（在这种情况下：媒体查询）
and will logically combine two arguments (eg a: true, b: false => false) and将逻辑地组合两个参数（例如：真，B：假=>假）
There are other keywords like not , only , orientation: landscape , orientation: portrait you may want to read about them too (note: this list may not be complete)还有其他关键字，例如not 、 only 、 orientation: landscape 、 orientation: portrait您可能也想阅读有关它们的信息（注意：此列表可能不完整）

I think it is this, what you wanted:我认为这是你想要的：

Executable solution可执行的解决方案
You can find the solution below.您可以在下面找到解决方案。 Please note that it will only trigger at the exact screen size.请注意，它只会在精确的屏幕尺寸下触发。 You may need to resize your window.您可能需要调整窗口大小。 In Firefox/Chrome there is a debugger for screen-sizes where you can set a specific size for the window.在 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

Try using "vh" and "vw" and ur unit of size instead of "px",尝试使用“vh”和“vw”以及你的大小单位而不是“px”，

vh means veiwport height, vh 表示 veiwport 高度，

vw means veiwport width. vw 表示 veiwport 宽度。

7vh means 7% of the veiwport 7vh 意味着 7% 的 veiwport

Answer 4

I'd suggest to use material ui breakpoints: https://mui.com/customization/breakpoints/#custom-breakpoints我建议使用材料 ui 断点： https : //mui.com/customization/breakpoints/#custom-breakpoints

Try creating an specific breakpoint for that device: ie尝试为该设备创建一个特定的断点：即

const theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 640,
      laptop: 1024,
      desktop: 1200,
    },
  },
});

Let's say you add the iphone breakpoint, then to add css rules for only that specific breakpoint use theme.breakpoints.only(key) => media query :假设您添加了iphone断点，然后仅为该特定断点添加 css 规则，请使用theme.breakpoints.only(key) => media query ：

const useStyles = makeStyles(theme => ({
  paper: {
    [theme.breakpoints.only('iphone')]: {
      backgroundColor: 'red',
    },
  }
}));

Then on your function:然后在你的功能上：

...
const classes = useStyles()
return (
  <Paper className={classes.paper}>
  </Paper>
);

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

问题描述

4 个解决方案

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

Explanation:解释：

解决方案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

Explanation:解释：

解决方案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