Media Queries определяют область действия правил стилей. Сегодня я предлагаю вам рассмотреть логику применения Media Queries - неотъемлемой часть спецификации CSS3. Применение данных правил упрощает верстку страниц, в особенности где используются адаптивный дизайн, выводимые циклом элементы и другое.
If (Если)
Логический элемент If можно использовать для определения версии браузера.
<!--[if IE 8]><link href="/ie8.css" rel="stylesheet" media="all" /><![endif]-->
And (И)
Объединение условий.
@media (min-width: 600px) and (max-width: 800px) { html { background: red; } }
Or (Или)
Перечисление
@media (max-width: 600px), (min-width: 800px) { html { background: red; } }
Технически, запятая относится к перечислению, но по факту работает как элемент "или".Not (Не)
Обратная логика с элементом Not.
@media not all and (max-width: 600px) { html { background: red; } }
Данное выражение работает так, not x and y = not (x and y) ≠ (not x) and y. Т.е. оно не работает индивидуально для части с указанием max-width, хотя и часть написана через and. Вот если бы была запятая, тогда да.
Эксклюзивный
Когда необходимы эксклюзивные правила.
@media (max-width: 400px) { html { background: red; } }
@media (min-width: 401px) and (max-width: 800px) { html { background: green; } }
@media (min-width: 801px) { html { background: blue; } }
Логически это работает как переключатель состояний, но при этом имея значение по-умолчанию.
Переопределение
В некоторых случаях это может быть эффективнее, чем эксклюзивные правила.
@media (min-width: 400px) { html { background: red; } }
@media (min-width: 600px) { html { background: green; } }
@media (min-width: 800px) { html { background: blue; } }
Такая схема будет работать, потому что условия отсортированы правильно. Если изменить порядок то в окне браузера шириной более 800px будет красный фон.
Сначала для мобильных
Прописываете сначала стили для маленьких экранов, а потом переопределяете для больших. Тут главное свойство min-width.
html { background: red; }
@media (min-width: 600px) { html { background: green; } }
Сначала для настольных компьютеров
Прописываете сначала стили для больших экранов, а потом переопределяете для маленьких. Тут главное свойство max-width.
html { background: red; }
@media (max-width: 600px) { html { background: green; } }
Необычные
Вы можете все усложнить насколько хотите.
@media only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape) {
html { background: red; }
}
Обратите внимание на ключевое слово only, оно было использовано для предотвращения использования стиля для браузеров не поддерживающих Media Queries.
Оригинал статьи.
Рубрики
-
3D и графика ( 7 )
-
Веб разработка ( 13 )
-
Железо и периферия ( 8 )
-
Портфолио и резюме ( 3 )
-
Сервер на Debian Linux ( 20 )
-
Сисадмину на заметку ( 14 )
-
Тестовая лаборатория ( 10 )
Новые записи
25.03.23 Ошибка 0x00000709 при попытке установить сетевой USB принтер
05.10.19 Добавление сертификата в exim4
18.08.18 Утилиты диагностики системы Linux
02.10.16 Отключение systemd на Debian
Комментарии
- у мене схожа проблема як була у вас... чому ви вирішили ввести 92500000??? дякую...
11.04.23 01:51 комментирует: Володимир - Не очень понятно, как это противоречит тому, что написал Михаил. Если в какой-т...
25.01.23 17:15 комментирует: Дмитрий - Здравствуйте , данная манипуляция с прошивкой подойдёт к к ноутбуку Asus K53Sv? ...
17.01.23 17:53 комментирует: Андрей - Спасибо. Хрен-то там я бы сам смог педальки встроить в цепь войсмитера.
31.01.22 21:03 комментирует: Блабла