Как изменить макет для небольших экранов в пользовательском интерфейсе материала?

Question

• Я новичок в адаптивном дизайне материалов.
• Когда я перехожу на меньшие экраны, статус Спорт должен оставаться в правом углу.
• и 4Стандарт, 5Стандарт, 6Стандарт, 7Стандарт, 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>

Answer 1

Вы можете следовать общему принципу, описанному в " Адаптивный макет страницы с медиазапросами " из Матье Небра и Эмили Риз .

@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-кода, вы можете применить аналогичное правило.