Question

我是自适应材料设计的新手。
当我移到较小的屏幕时，“运动状态”应该位于右上角。
和4Standard，5Standard，6Standard，7Standard，8Standard，9Standard应该到下一行。
我用Google搜索了一下，发现以下行用于媒体查询，并且测试的颜色正在更改，但不确定如何更改布局
```
["@media (min-width:780px)"]: {
   // eslint-disable-line no-useless-computed-key
   backgroundColor: "red"
}
```
是否可以单独使用css更改布局的结构，或者我需要在js中放置条件
您能告诉我如何解决它吗？在下面提供沙盒和代码段

小屏幕：https://codesandbox.io/s/material-demo-xkwyl

大屏幕：https://xkwyl.codesandbox.io/

sportsCardHeaderItem: {
    color: "black",
    margin: "10",
    textAlign: "left",
    paddingLeft: 16,
    backgroundColor: "green",
    ["@media (min-width:780px)"]: {
      // eslint-disable-line no-useless-computed-key
      backgroundColor: "red"
    }
  },
  sportsCardHeaderItemSecond: {
    margin: "10",
    textAlign: "left",
    paddingLeft: 24
  },
  sportsCardHeaderItemHeading: {
    fontSize: 14,
    color: "#455A64"
  },
  sportsCardHeaderItemHeadingValue: {
    fontWeight: "bold",
    fontSize: 20,
    color: "#263238"
  },

下面是标记

   <div
          style={{ flexGrow: "0" }}
          className={classes.sportsCardHeaderItemSecond}
        >
          <div className={classes.sportsCardHeaderItemHeading}>3Standard</div>

          <div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
        </div>

        <div
          style={{ flexGrow: "0" }}
          className={classes.sportsCardHeaderItemSecond}
        >
          <div className={classes.sportsCardHeaderItemHeading}>4Standard</div>

          <div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
        </div>

        <div
          style={{ flexGrow: "0" }}
          className={classes.sportsCardHeaderItemSecond}
        >
          <div className={classes.sportsCardHeaderItemHeading}>5Standard</div>

          <div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
        </div>

        <div
          style={{ flexGrow: "0" }}
          className={classes.sportsCardHeaderItemSecond}
        >
          <div className={classes.sportsCardHeaderItemHeading}>6Standard</div>

          <div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
        </div>

Answer 1

您可以遵循 Adaptive page layout with Media Queries 和Mathieu Nebra中“ Emily Reese”中详述的一般原则。

@media screen and (max-width: 1280px)
{
    /* Write your CSS properties here ici */
}

例如：

当前页面宽度设置为900 px，内容居中：

#bloc_page
{
    width: 900px;
    margin: auto;
}

我建议您在这些行之后添加以下媒体查询规则：

@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}

此规则的意思是：“如果窗口宽度不超过1024 px，则对所有屏幕类型运行以下CSS规则”。

有问题的CSS规则非常简单；实际上只有一个规则：页面宽度是自动调整的（而不是固定的900 px宽度）。
  然后，该页面将占用窗口中的所有可用空间。这样可以避免出现水平分辨率较低的水平滚动条。

如果您具有正确的CSS代码结构，则可以应用类似的规则。

如何在材质ui中更改较小屏幕的布局？

1 个答案: