将 Material UI 应用程序转换为移动应用程序并使其响应

Question

我正在使用 React 和 Material UI 构建一个网络应用程序，但我对移动设备尺寸有困难。所以我有几个问题：

如何使边距响应例如： marginLeft: theme.spacing(20),这是我为徽标设置边距的方式桌面上的示例：
示例手机：

Answer 1

我曾经在做的一个项目中遇到过类似的问题。我用 react-device-detect 解决了。使用此软件包，您可以根据设备运行您的应用设置一般的边距和布局。

import {
  BrowserView,
  MobileView,
  isBrowser,
  isMobile
} from "react-device-detect";

然后你可以同时生成两个视图

<BrowserView>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
    <h1> This is rendered only on mobile </h1>
</MobileView>

或使用isMobile进行条件渲染。

Answer 2

您可以使用 CSS Media Queries:

CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:

theme.breakpoints.up(key)

theme.breakpoints.down(key)

theme.breakpoints.only(key)

theme.breakpoints.between(start, end)

默认断点：

Each breakpoint (a key) matches with a fixed screen width (a value):

xs, extra-small: 0px

sm, small: 600px

md, medium: 960px

lg, large: 1280px

xl, extra-large: 1920px

These breakpoint values are used to determine breakpoint ranges. A range starts from the breakpoint value inclusive, to the next breakpoint value exclusive:
value         |0px     600px    960px    1280px   1920px  
key           |xs      sm       md       lg       xl   
screen width  |--------|--------|--------|--------|-------->  
range         |   xs   |   sm   |   md   |   lg   |   xl  
These values can be customized.

示例：

const useStyles = makeStyles(theme => ({
  myLogo: {
    // Match [md, ∞)
    //       [960px, ∞)
    [theme.breakpoints.up('md')]: {
      ...,
      marginLeft: theme.spacing(20),
      ...
    },
    // Match [0, sm + 1)
    //       [0, md)
    //       [0, 960px[
    [theme.breakpoints.down('sm')]: {
      ...,
      // no margin
    },
  }
}));

将 Material UI 应用程序转换为移动应用程序并使其响应

Convert Material UI app to mobile and make it responsive

responsive-design

reactjs

material-ui