Как хайпово писать медиа запросы в react?

Какой-нибудь добряк может объяснить, как правильно писать медиа запросы в реакте?
1.создавать отдельный глобальный файл
2.создавать в компоненте файл с медиа запросами и туда бабахать медиа запросы
3.в файле стилей компонента
или как-то иначе
что считается хорошей практикой, если еще и пример скинете, буду ооооочень благодарен
и я вот так запросы пишу, мб опять же в реакте или вообще есть другая практика их написания
@media (max-width:990px) {
  .container {
    max-width: 750px ;
  }
  .hero {
    grid-template-columns: auto;
    justify-items: center;
    text-align: center;
  }
  .input {
    width: auto;
  }
  .user__profile {
    margin: 0 0 20px 0;
  }
  .pagination__text {
    margin: 0;
  }
  .user__repositories {
    margin: 0;
  }
}

@media (max-width:750px) {
  .container {
    max-width: 520px ;
  }
  .header {
    display: grid;
    justify-items: center;
    padding: 0 0 10px 0;
  }
  .header__logo {
    margin: 16px 0;
  }
  .pagination {
    display: grid;
    justify-content: center;
    row-gap: 10px;
  }
}

@media (max-width:520px) {
  .container {
    max-width: 320px ;
    padding: 0;
  }
  .hero {
    padding: 30px 0px;
  }
  .user-profile__img {
    max-width: 270px;
  }
  .pagination__list {
    display: block;
  }
  .user-profile__social {
    display: grid;
    justify-items: center;
  }
}

@media (max-width:320px) {
  .container {
    max-width: none;
  }
}
  • Вопрос задан
  • 953 просмотра
Решения вопроса 1
black1277
@black1277
Вольный стрелок
Есть 3 способа подключить медиазапросы:
1 Прямо в HTML-документе
<link rel="stylesheet" media="(max-width: 700px)" href="example.css" />

2 Использовать правило import в CSS-файле
@import url(example.css) (max-width: 700px);

3 Директиву media в CSS-файле
@media (max-width: 700px) {
  /* Здесь прописывается CSS-правила */
}

Реакт позволяет использовать все эти способы. Поэтому, выбор остается за разработчиком. Если следовать идее разбивки кода на компоненты, то логичнее всего вставлять медиазапросы в стилях того компонента, который требует различного отображения.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы