ИнтернетПохожие презентации:
13. Медиа-запросы
1. Медиа-запросы в CSS
2.
Медиа-запросы CSSПри создании дизайна веб-страницы приходится учитывать, что её будут
смотреть с разных устройств: телефонов, планшетов, ноутбуков,
стационарных компьютеров, а может, даже и телевизоров.
Чтобы форматировать контент сайта под разные экраны, в CSS
используют медиа-запросы. Благодаря этим запросам в большинстве случаев
даже не нужно глубоко погружаться в HTML-код.
CSS-медиа-запросы (media queries) — это набор правил (запросов),
которые позволяют адаптировать внешний вид веб-страницы под
технические параметры устройства пользователя: ширину и высоту экрана,
плотность пикселей, количество поддерживаемых цветов и так далее.
Любой медиа-запрос — это условие, которое задаётся тому или иному
стилю. Если условие выполняется, то стиль применяется, если нет — не
применяется. Таким образом, при помощи запросов можно прописать сразу
несколько стилей со своими условиями под разные ситуации. Например, для
разной ширины экрана пользователя: до 320 px, от 320 px до 720 px, от 720
px до 1024 px и от 1024 px.
В отличие от других инструментов адаптивной вёрстки, например CSS
Grid, медиа-запросы довольно просты в изучении. При этом медиа-запросы
можно комбинировать с тем же Grid, чтобы задавать более сложную логику
отображения.
2
3.
Медиа-запросы CSSМедиа-запросы можно применять:
• в правилах CSS @media и @import;
• в тегах HTML <style>, <link>, <source> и других, имеющих атрибут media.
@media
Ключевое слово @media — основной инструмент для работы медиазапросами. По сути, это обёртка для стиля: всё, что находится внутри,
применяется или не применяется в зависимости от того, выполняется ли
условие.
Вот как выглядит запрос @media в общем виде:
А вот пример — запрос, который запускает разные стили, когда
пользователь поворачивает экран.
3
4.
Медиа-запросы CSSКак и другие правила CSS, @media можно вкладывать внутрь других
правил. Например:
@import
Ключевое слово @import позволяет включить в файл с разметкой стили
из других CSS-файлов. Фишка в том, что внутри этого правила можно
прописать условия, при которых стили будут работать, — например, при
изменении ориентации экрана.
Вот как выглядит синтаксис запроса @import в общем виде:
4
5.
Медиа-запросы CSSПри желании можно пойти и другим путём: прописать в отдельных CSSфайлах полный набор правил для каждого условия и просто подключить их с
помощью конструкции @import. Тут, как говорится, на ваше усмотрение.
Минус @import — низкая производительность. Дело в том, что это
правило блокирует рендеринг сайта: он просто не может отобразиться, пока
браузер не загрузит все импорты. Поэтому веб-разработчики рекомендуют
избегать использования этой конструкции.
Теги HTML
Также медиазапросы можно встраивать внутрь тегов HTML. Вы можете
прописать несколько стилей <style>, которые будут применяться в
зависимости от результата медиазапроса:
Если поставить тег <link> внутри <head>, можно подключить стиль из
другого файла CSS, как будто вы используете ключевое слово @import. С той
лишь разницей, что <link> работает быстрее, потому что не блокирует
рендеринг сайта.
5
6.
Медиа-запросы CSSОбратите внимание: браузеры подгружают указанные в параметре href
файлы, даже если условие медиазапроса не выполняется. Если таких ссылок
поставить очень много, это может замедлять работу сайта.
Если прописать медиазапрос внутри тега <source>, то можно определять,
в каких версиях вёрстки загружать медиафайл, а в каких — нет.
Таким образом можно, например, показывать картинки с разным
разрешением в зависимости от устройства пользователя:
6
7.
Медиа-запросы CSSМетатег viewport
Метатег viewport помогает адаптивной вёрстке правильно показываться на
разных экранах. Например, у двух смартфонов может быть одинаковый размер
экрана, но разное количество пикселей на дюйм. Из-за этого браузер может
ошибочно считать, что один смартфон имеет больший экран, чем другой, и
применить к нему неподходящие стили — например, показать большие кнопки
или шрифт.
Чтобы на экранах с одинаковым размером и разным разрешением
отображался один и тот же стиль, придумали метатег viewport. Он приводит
всё к единому знаменателю — то есть делает так, чтобы стили
ориентировались не на количество пикселей, а на размер экрана. Тогда
адаптивная вёрстка будет работать правильно на любом устройстве, и
медиазапросы будут выбирать стили в зависимости от размера экрана, а не
разрешения.
Метатег viewport ставится прямо в HTML-код страницы, в раздел <header>:
7
8.
Медиа-запросы CSSСейчас в веб-разработке используют две основные версии медиазапросов:
Level 3 и Level 4. Оба уровня запросов поддерживаются всеми популярными
современными браузерами.
Level 3 поддерживается большим количеством старых браузеров, зато Level
4 добавляет новые медиа-функции — например, частоту обновления экрана.
Разница в поддержке, впрочем, совсем небольшая и находится в пределах
погрешности. Согласно данным с сайта Can I use, в июле 2023 года Level 3
поддерживают 98,29% браузеров всех интернет-пользователей, а Level 4 —
96,15%.
Есть два вида условий, которые можно задать в медиазапросах:
• тип устройства — отвечает за идейно разные способы потребления
контента;
• медиафункции — отвечают за технические характеристики устройства.
Медиазапросы делят все устройства, с которых можно открывать сайты, на
четыре типа:
• all — все устройства;
• screen — устройства с экранами;
• print — устройства в режиме предварительного просмотра страницы перед
печатью;
• speech — программы чтения с экрана.
8
9.
Медиа-запросы CSSСинтаксически это оформляется так (на примере устройств с экранами):
Медиафункции (характеристики)
Второй способ задать в медиазапросе условие — указать характеристики
устройства или браузера: ширину окна, ориентацию устройства и так далее.
У некоторых характеристик можно задавать минимальные и максимальные
значения: для этого к ним добавляются приставки min- и max-.
Медиафункции указываются в круглых скобках. Например:
9
10.
Медиа-запросы CSSИногда применение того или иного стиля может зависеть от нескольких
условий. Скажем, вы хотите одновременно установить минимальную и
максимальную ширину экрана.
В таких случаях каждое условие запроса пишут в отдельных скобках, а
между ними ставят логические операторы. Выглядит это так:
Давайте пройдёмся по этим операторам и выясним, как их применять.
• and
Оператор and используется как логическое И. Запрос выполняется только в
том случае, если истинно каждое из условий. Так, в примере ниже стиль
применится, если ширина окна браузера больше 480 px И меньше 1024 px — то
есть, где-то между этими значениями.
10
11.
Медиа-запросы CSS• or
Оператор or используется как логическое ИЛИ. Результат медиазапроса
истинен, если истинно хотя бы одно из условий. В следующем примере стиль
применится, если в запросе есть указывающее устройство ввода, неточное
ИЛИ точное.
В медиазапросах уровня 4 вместо оператора or можно использовать
запятую:
11
12.
Медиа-запросы CSS• not
Оператор not используется как логическое НЕ. Например:
• only
Оператор only нужен, чтобы обезопасить себя от некорректной работы
некоторых старых браузеров, читающих синтаксис CSS2 вместо CSS3.
Допустим, у нас есть такой запрос:
Устаревший браузер сможет прочитать его только до первого пробела,
следующего после @media screen. Соответственно, стиль он отобразит на всех
устройствах с экранами, а не только на тех, у которых ширина окна больше
480px, как нам нужно.
12
13.
Медиа-запросы CSSЕсли добавить оператор only, браузер дочитает только до него: @media only
— и не применит стиль вовсе.
Используя оператор only, вы должны указывать тип устройства. Например:
Чтобы контролировать, в какой последовательности будут применяться
логические операторы, можно использовать в запросах группирующие скобки:
13
14.
Медиа-запросы CSSИтог:
• Медиазапросы — это инструмент адаптивной вёрстки, который можно
использовать как в CSS, так и в HTML-коде.
• Медиазапросы позволяют запрашивать у пользователя тип и
характеристики устройства. Если полученные данные соответствуют
ожидаемым, то применяется оформление.
• Если для одного стиля должно выполняться сразу несколько условий, их
можно объединять с помощью логических операторов: or, запятая, and, not и
only.
14
15.
ЗаданиеПрактическое задание:
1. Создать 3 страниц сайта;
2. Используйте Grid для разбиения сайтов на структуры;
3. Верхний блок грида – навигация;
4. На сайтах создать описание персонажей;
5. Использовать изображения и текст;
6. Изменять стилистику через CSS;
7. Использовать медиа-запросы для адаптации сайта под разные размеры
окна;
8. Сделайте задний фон с затемнением или размытием;
9. Каждый слайд должен быть о персонаже или личности;
15