【问题标题】：react material ui not responsive when opened in mobile browser在移动浏览器中打开时反应材料 ui 没有响应
【发布时间】：2017-07-13 22:35:24
【问题描述】：

我正在尝试使用 React Material ui 库构建移动 Web 应用程序。

但材料 UI 组件似乎没有响应。它们在桌面上显示得很好，但是当我在移动浏览器上打开它时，字体非常小。

Material UI 不就是用来构建移动应用的吗？为什么它甚至没有响应？

【问题讨论】：

我猜你没有在文档的<head> 部分添加<meta name="viewport" content="width=device-width" />。
@pawel，感谢您的指出。这正是问题所在。

标签： reactjs responsive

【解决方案1】：

您必须在该部分中添加指令。

添加到您启动应用程序的项目中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视口是网页的用户可见区域。它因设备而异，在手机上会比在电脑屏幕上小。

视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。

width = device-width 部分将页面的宽度设置为设备的屏幕宽度。

initial-scale = 1.0 部分设置浏览器的第一次缩放。

【讨论】：

刚刚做了我的...嗯...晚上：D

【解决方案2】：

材质@4 和@5

您的公用文件夹中有一个index.html 文件。在 <head> 标记的开头添加这一行。

    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

Reference

【讨论】：

【解决方案3】：

https://material-ui.com/customization/breakpoints/

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

像这样使用断点：

<Grid container>
  <Grid xs={12} md={6} lg={5} item>    
  </Grid>
  <Grid xs={12} md={6} lg={7} item>
  </Grid>
</Grid>

【讨论】：

【解决方案4】：

假设您确实添加了视口，您可以按照@Lane 的建议使用断点使您的网页响应。

步骤：

声明一个变量。如果断点被命中则返回 true，否则返回 false。
```
const matches = useMediaQuery('(max-width:600px)');
```
参考：https://mui.com/components/use-media-query/
使用sx props 使用步骤 1 中的变量和三元运算符来设置宽度
```
<Paper sx={{ width: matches === false ? '40vw' : '80vw' }} />
```
参考：https://mui.com/system/the-sx-prop/

示例：

const Component = () => {
    const matches = useMediaQuery('(max-width:600px)');

    return (
      <Box
         sx={{
           '& .MuiTextField-root': { **width: matches === false ? '35vw' : '70vw'** },
        }}
      >
         {/* ... */}
      </Box >
    );
}

【讨论】：