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

Question

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

1. 如何使边距响应，例如:marginLeft: theme.spacing(20)，这是我为 Logo 设置边距的方式桌面示例:
   示例手机:
   

Answer 1

你可以使用 CSS Media Queries :

CSS media queries are the idiomatic approach to make your UIresponsive. 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. Arange starts from the breakpoint value inclusive, to the nextbreakpoint 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
    },
  }
}));