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