Логика медиазапросов

Логика медиазапросов

От автора: Просто на случай, если и у вас по этому поводу постоянно бывают путаница, как у меня.

If

Медиазапросы – это не более чем операторы If. Если условие верно по отношению к браузеру, используются внутренние инструкции CSS.

And

Используется ключевое слово and.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Or

Альтернативы обособляются запятой.

Технически к нему обращаются для разделения медиазапросов, но эффективно и or.

Not

Инверсия условия с помощью ключевого слова not.

Насколько я знаю, если просто сделать not (max-width: 600px), то это не сработает, отсюда вытекает вышеприведенный слегка грубоватый синтаксис. Возможно, кто-то сможет мне это объяснить. Обратите внимание, что not имеет меньший приоритет, чем запятая, так что если вы отделяете запросы запятой, то инверсия будет действовать только на внутренний запрос. Также заметьте, что not обращает вспять логику всего медиазапроса в общем, а не отдельных его частей. not x and y = not (x and y) ≠ (not x) and y

Эксклюзивность

Чтобы гарантировать единовременное действие только одного медиазапроса, подберите числа (или другие параметры) так, чтобы это стало возможным. Может быть, это будет легче, если организовать запросы вот таким образом.

Логически это немного похоже на оператор switch, только без «если ничего не подойдет, сделать так», как в установке по умолчанию.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Переопределение

Нет гарантий от того, что при выполнении не сработают сразу несколько медиазапросов одновременно. Поэтому в некоторых случаях более эффективно использовать переопределение, а не делать все условия эксклюзивными, так как медиазапросы обрабатываются последовательно, сохраняя исходный порядок селекторов.

Вышеприведенный код станет работать, так как запросы расположены правильно. Измените этот порядок, и при ширине окна браузера свыше 800px фон станет красным, что возможно покажется неочевидным.

Стратегия ”Mobile First”

Стили для маленьких экранов помещаются в вашем обычном CSS, а затем, по мере увеличения экрана вы переопределяете то, что нужно. Для этого используем медиазапрос min-width.

Стратегия ”Desktop First”

Стили для больших экранов помещаются в вашем обычном CSS, а затем, по мере уменьшения экрана вы переопределяете то, что нужно. Для этого используем медиазапрос max-width.

Становимся эксцентричными

Здесь вы можете усложнить все, насколько захотите.

Обратите внимание, что ключевое слово only понадобилось для того, чтобы предотвратить загрузку таблицы стилей и применение стилей неподдерживающими медиазапросы браузерами. Не уверен, насколько это сейчас или когда-либо раньше требовалось на самом деле.

Автор: Chris Coyier

Источник: http://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree