Задать вопрос

Как хайпово писать медиа запросы в 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;
  }
}
  • Вопрос задан
  • 1382 просмотра
Подписаться 3 Простой 2 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 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-правила */
}

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

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽