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

Сергей delphinpro

frontend developer
Ответы пользователя по тегу Media queries

  • Где принято писать media-запросы при работе с SASS?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Староверы пишут в отдельном файле.
    Потому что они так привыкли со времен, когда препроцессоров не было.
    Или потому что не знают об автоматическом комбинировании запросов при сборке, боясь раздувания кода.

    Нормально – это верстать максимально независимыми блоками, а отсюда следует единственный правильный вывод – стилевое описание блока должно быть целиком в одном месте.
    Ответ написан
    6 комментариев
    6 комментариев

  • Как правильно указывать медиа запросы с использованием Less?

    delphinpro
    @delphinpro
    frontend developer
    Объявим миксин

    .media(@screen, @rules) {

  & when (@screen = md) {
    @media (min-width: 768px) {
      @rules();
    }
  }

  & when (@screen = lg) {
    @media (min-width: 1024px) {
      @rules();
    }
  }
}


    Будем использовать

    .hero {
  max-width: 540px;
  
  .media(md, {
    max-width: 960px;
  });
  
  .media(lg, {
    max-width: 1180px;
  });
}
    Ответ написан
    3 комментария
    3 комментария

  • Как работают медиазапросы, почему не работает?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    max-width означает "до" (включительно)
    min-width означает "от" (включительно)

    т.е. у вас стили применяются на ширине браузера до 992px включительно
    Начиная с 993 эти стили отключаются.

    max-device-width: 1400px
    означает "размер дисплея до 1400". Дисплея (устройства), не браузера.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно настроить CSS медиа запросы?

    delphinpro
    @delphinpro
    frontend developer
    Правило перекрывается более приоритетным селектором

    Всё верно.
    Селектор один и тот же. Но один (ваш) расположен во внешнем файле, второй встроен в страницу через тег style. При одинаковой специфичности селекторов приоритет отдается встроенному в страницу (срабатывает каскад).

    Выхода три
    1. Поместить свои стили в теле страницы после чужих.
    2. Вынести чужие стили во внешний файл, подключаемый перед вашим.
    3. Увеличить специфичность своего селектора. Это наиболее простой метод. Самое-самое простое — добавить !important своим правилам. Или включить еще какой-то класс/тег в свою цепочку селекторов.

    Есть еще 4 варик — исправить непосредственно чужой стиль.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно оформлять медиазапросы: медиазапросы внутри класса или классы внутри медиазапроса?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

    Автор не упоминает препроцессоры, в тегах тоже нет. Значит речь идёт о нативном css, в котором только первый вариант и возможен.

    НО, даже в первом варианте я категорически не рекомендую писать так, как вы написали. Гораздо лучше и удобнее будет так:

    /*== Какой-то блок на странице */
.class-1 {
  /* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
  .class-1 {
    /* стили для экранов 767px и менее */
  }
}

/*== Какой-то другой блок на странице */
.class-2 {
  /* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
  .class-2 {
    /* стили для экранов 767px и менее */
  }
}

/*== И так далее… */
…


    Код должен быть структурирован. Стили, описывающие отдельный селектор, всегда должны быть все вместе и рядом.

    А если вы собираете стили препроцессором, то наверняка у вас описания всех селекторов будут раскиданы по отдельным файлам. Медиазапрос для селектора пишете в том же файле, где и основной стиль.

    Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.
    Ответ написан
    7 комментариев
    7 комментариев

  • Какие размеры картинок выбрать для responsive?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    В современной верстке должен по максимуму использоваться вектор. Это снимает кучу проблем.
    Разумеется, не все картинки можно/нужно перегонять в вектор. При использовании растра, в общем случае, достаточно две картинки — x1 и x2. X1 — это тот размер, в каком картинка отображается на сайте, x2, соответственно, удвоенный. Например картинка 100х100, к ней делаем ретина-вариант 200х200.
    Всё остальное зависит от бюджета проекта.
    Есть время/деньги — заморачиваемся. Пилим третий вариант x3, подключаем полифилы для srcset, делаем дополнительные наборы для брикпойнтов в медиазапросах.
    Нет времени/денег — тупо грузим везде удвоенные размеры, и указываем реальные в css.
    Ответ написан
    15 комментариев
    15 комментариев