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

IT技术 html css reactjs redux material-ui
2021-05-22 06:44:40
  • 我是响应式材料设计的新手。
  • 当我移动到较小的屏幕时，Sports Status 应该保持在右角。
  • 和 4Standard, 5Standard, 6Standard, 7Standard, 8Standard, 9Standard 应该到下一行。

  • 我用谷歌搜索并发现媒体查询和测试颜色正在改变的以下行，但不确定如何更改布局

    ["@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>
1个回答

您可以遵循Mathieu Nebra和Emily Reese 的“使用媒体查询进行自适应页面布局”中详述的一般原则。

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

例如：

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

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

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

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

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

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

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

其它你可能感兴趣的问题
上一篇React Native - 如何使 ScrollView 组件的垂直滚动条永久化？ 下一篇将字符串转换为 JSON 对象以用于 React.js 样式标签 style={}