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

Ankhena

Нежно люблю верстку
Ответы пользователя по тегу Media queries

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

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Я вам еще вчера написала ответ в комментариях.

    Проверяйте тут не 100% 5f2fcefc88bd0882587479.png

    Либо неправильно написаны селекторы.
    Покажете код в песочнице или ссылку на сайт, станет понятнее.
    Ответ написан
    4 комментария
    4 комментария

  • Почему применяется сразу несколько медиа-запросов?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не переопределяйте свойства, которые не изменяются.
    Зачем вы задаете флекс 2 раза (боюсь даже, что не 2), если блок как был флексовым, так и остался? С остальными свойствами аналогично.
    Т.е. в примере со скрина вторая группа медиа вообще не нужна, потому что не поменялось вообще ничего.

    Вспомните неравенства в школе. Тут тоже самое.
    Ширина окна 300 попадает в оба условия. Соответственно, и стили применяются и те и те.
    Браузер как будто бы игнорирует скобки медиа и высчитывает специфичность как обычно.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно указывать медиа-запросы формата "Min-width - max-width"?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    У вас 
    .blog-action .blog_inner .item {
    width: 41%;
}

    а в медиа
    .blog .item

    Специфичность в первом случае выше и они перебивают всё остальное.

    Почитайте про нейминг БЭМ.
    Избегайте вложенности селекторов (больше 2 требуется очень редко, а БЭМ и вовсе без вложенности).
    Ответ написан
    8 комментариев
    8 комментариев

  • Как правильно подключить стили для мобильной версии сайта?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Разумнее подход mobile-first.
    Все media пишутся по min-width начиная от меньшего.
    Не важно, что макет у вас только десктопный. Напрягитесь и пересчитайте.
    Доля мобильного трафика больше, чем десктопного.

    Если всё же desktop-first, то по max-width в обратном порядке, начиная с большей ширины.

    Сами media пишутся внизу файла css, если вы не разбиваете файлы на блоки.
    Возможно, вам удобнее писать media прямо под селектором.
    Тогда при сборке хорошо бы прогнать файл через плагин группирующий media условия и ставящий их вниз файла.

    Если вам нужен !important, то скорее всего в основной части использована слишком большая вложенность селекторов. А потом пишете простой селектор или селектор с меньшим весом.
    Прочитайте про специфичность селекторов и/или упростите код.

    Остальное на конкретном примере.
    Ответ написан
    Комментировать
    Комментировать

  • Не работает @media запрос, в чем проблема?

    Ankhena
    @Ankhena
    Нежно люблю верстку 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    забыли
    Ответ написан
    1 комментарий
    1 комментарий

  • Как увеличить высоту контейнера по соотношению его длины?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку


    Для фона подходящий bg size, чаще всего cover
    https://webref.ru/css/background-size
    Ответ написан
    1 комментарий
    1 комментарий

  • Используете ли вы данную заготовку при адаптивной верстке?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Все зависит от дизайна.

    При простом дизайне и функциональности может хватить, например, двух или трех точек: 320 768 980.
    При сложном их могут оказаться десятки.

    Есть разная тактика что делать между точками. Можно делать фиксированную ширину и оставлять поля. Можно делать всегда 100% ширину экрана. Второй вариант сложнее, а значит условий может понадобится больше.

    Писать всю ту простыню просто так, лишь бы написать, смысла никакого нет.
    Ответ написан
    Комментировать
    Комментировать

  • CSS Медиа запросы, зачем only?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Я добавлю к ответу Алекс Глебов

    2, 3. Например, еще есть принтеры и программы для чтения с экрана.

    4. Если стиль подходит под несколько запросов, то действует обычная логика. Либо "затирается", то что выше в документе либо в зависимости от специфичности селекторов.

    7. Я обычно делаю так: если изменений для адаптации мало, то пишу основной селектор и сразу под ним необходимые media. Если много, то наоборот, медиа запрос и в нем все селекторы, которые в нем нуждаются.

    Ну и главное: просто потестируйте на простом примере с изменением цвета фона в зависимости от размера экрана. Пишите media в одном и другом порядке, смотрите в DevTools. Пробуйте зависимости от ширины экрана, вьюпорта, плотности пикселей, соотношения сторон и т.д. И все быстренько поймете.

    А еще, заодно, сразу 2 ссылочки про вьюпорты мобильных устройств
    https://www.esolutions.se/en-GB/test
    viewportsizes.com
    (Обычно это следующий вопрос, почему на мобильном, у которого экран 1920 точек показывается версия от 320)
    Ответ написан
    6 комментариев
    6 комментариев