Медиа запросы css цели их использования примеры применения реферат
Обновлено: 30.06.2024
В этой статье мы подробно рассмотрим, что такое медиа-запросы, как они работают и как их правильно использовать, в том числе и для создания адаптивного дизайна. Разберём конструкции @media, которые используются в Bootstrap.
Что такое медиа-запросы
Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.
Медиа-запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются всеми современными браузерами (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).
Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.
Подключение метатега viewport к странице осуществляется так:
Синтаксис
Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий . В качестве условия можно указывать тип устройства или требования к определённой характеристике . Требование к определённой характеристике записывается в круглых скобках .
Комбинирование нескольких условий выполняется с помощью логических операторов .
После составления @media , стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.
Пример медиа-запроса с одним условием:
Пример медиа-запроса с комбинированием нескольких условий:
Типы устройств
В @media можно указывать определённые типы устройств :
- all – для всех;
- print – для принтеров и в режиме предварительного просмотра страницы перед печатью;
- screen – для устройств с экранами;
- speech – для программ чтения с экрана.
Например, этот @media только для экранов:
А здесь для экранов и принтеров:
Логические операторы
Логические операторы and , , (запятая), not и only предназначены для создания сложных медиа-запросов.
Оператор and используется для объединения нескольких условий. В этом случае их результат будет истинным, когда каждое из них будет истинным.
Например, следующий @media будет применяться только при выполнении всех трёх условий (это экран, width >= 1200px и ориентация landscape):
, (запятая)
Применение стилей, когда необходимо лишь выполнение одного из указанных условий, достигается посредством разделения их между собой с помощью , (запятой).
В этом примере стили будут применяться к странице в двух случаях. Когда width >= 544px или ориентация portrait .
Ключевое слово not используется для отрицания.
При использовании not с and отрицание работает для всего медиа-запроса. При этом, когда указываем not необходимо обязательно задавать тип устройства.
Например, применим стили только в том случае, когда не (экран и width >= 411px и height >= 731px) .
При использовании not в выражении с запятой он добавляет отрицание только для этой части.
Например, применим стили когда истинно следующее условие: не экран или не width >= 411px .
Ключевое слово only предназначено для того, чтобы браузеры, которые не поддерживают CSS3 медиа-запросы их игнорировали. В настоящее время это уже не актуально, поэтому использовать only не нужно.
Медиа-характеристики
При составлении условия кроме типов устройств и логических операторов можно ещё задавать требования к определённым характеристикам , которые должен иметь браузер, устройство вывода, или окружение. В некоторых источниках характеристики называют медиа-функциями.
Каждая характеристика в @media должна быть заключена в круглые скобки.
При этом применяться стили указанные в @media будут также как раньше, т.е. только в том случае, когда результат вычисления всего выражения будет являться истиной.
width
Медиа-характеристика width позволяет задать условие на равенство ширины области просмотра определённому значению.
Например, применим CSS только для viewport с шириной 320px.
Для определения диапазона можно использовать min-width и max-width .
Например, @media для ширины viewport от 576px до 1200px:
Для ширины больше 768px:
Если нужно меньше 1400px:
height
Для задания условий в отношении высоты viewport можно использовать height , min-height и max-height .
Например, @media для высоты viewport больше 720px:
orientation
С помощью orientation можно установить те или иные стили в зависимости от того, в каком режиме (альбомном или портретном) отображается сайт.
Например, в зависимости от ориентации viewport будем отображать разные картинки:
aspect-ratio
Характеристики aspect-ration , min-aspect-ratio и max-aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.
resolution
Характеристики resolution , min-resolution и max-resolution можно использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.
Например, установим другой размер шрифта для устройств с плотностью пикселей на дюйм более 150:
Стили для печати страницы с плотностью пикселей больше 300dpi:
При подключении таблицы стилей можно с помощью атрибута media установить медиа-запросы и тем самым определить условия, когда они должны использоваться.
Медиа-запросы для Bootstrap 3
Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):
Вышеприведённые запросы необходимо использовать только в указанном порядке.
Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.
Медиа-запросы для Bootstrap 4
Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):
Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):
Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:
Код JavaScript, учитывающий параметры устройств
Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа-запросам), осуществляется с помощью метода matchMedia объекта window .
Осуществляется это следующим образом:
Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).
Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.
Комментарии:
Добрый день! Подскажите, пожалуйста, как перестроить расположение блоков в зависимости от устройства?
Я создал в коде html 3 варианта расположения блоков. Как сделать так, чтоб блоки меняли размеры и перестраивались в зависимости от ширины экрана? Необходимо использовать медиа-запросы или JavaScript (скриншот)?
Спасибо!
Здравствуйте. Вам необходимо создать 2 блока. На маленьких экранах в этом случае следует отображать один блок, а второй – скрывать (display: none). На больших экранах отображать 2 блока с нужной шириной. Это если вам нужно создать именно блоки.
Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье.
Да, нужны блоки. Получается на большом экране должно быть два блока с текстом и картинка между ними. А на маленьком — один блок с текстом из двух больших блоков, и картинка уже под этим блоком…
Добрый день!
Такой вопрос, применил в js
if (window.matchMedia('screen and (max-width: 543px)').matches) <>
Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер
Здравствуйте!
Так, конечно, у вас код сработает один раз.
В этом случае его нужно добавить в обработчик события, который будет вызываться при смене размеров экрана:
Может кому-то поможет. Все дело было в работе LiveServer для VSCode. При стандартном открытии html документа все брейкопинты работают хорошо)
Добрый день, подскажите: использую Bootstrap 4.3.1. Сделал макет при помощи готовых классов. При включении панели разработчика и настройки адаптивности, возникла проблема. до 512px работают классы col-sm, с 512px до 660px col-md, с 660px до 799px col-lg. В документации идут значения 576px, 768px, 992px и 1200px. Почему у меня стили присваиваются на непонятных значениях ширины?
Привет!
576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.
Спасибо большое за ответ, но до этого делал сайт с точно такой же сборкой, сейчас юзаю его все хорошо брейкпоинты стандартные работают.
Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)
Это работает очень просто.
Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).
Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.
Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.
Добрый день! У меня такой вопросик возник по данной конструкции. Правильно ли я понял, что последняя строка @media (min-width: 1200px) здесь не обязательна, т.к. после (min-width: 992px) and (max-width: 1199px) будут срабатывать наши основные стили.
Привет! Эта строка обязательна. Если например viewport имеет ширину 1000px, то сначала сработает эта конструкция:
После неё сработают следующие стили, т.к. они не заключены в @media (min-width: 1200px) < … >. В этом случае они переопределят те что были, т.к. они идут после них.
Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.
Давайте рассмотрим еще несколько примеров использования медиа-запросов.
Медиа-запросы - это популярный метод доставки адаптивной таблицы стилей на разные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:
Пример
/* Установите телесный цвет фона */
body background-color: tan;
>
/* На экранах с разрешением 992 пикселей и менее установите цвет фона синий */
@media screen and (max-width: 992px) body background-color: blue;
>
>
/* На экранах с разрешением 600px установите цвет фона оливковый */
@media screen and (max-width: 600px) body background-color: olive;
>
>
Вы задаетесь вопросом, почему мы используем точно 992px и 600px? Это то, что мы называем "типичными брэкпоинтами" (точки изменения) для устройств. Вы можете прочитать больше о типичных брэкпоинтах в нашем Учебнике по адаптивному веб-дизайну.
Медиа-запросы для меню
В этом примере мы используем медиа-запросы для создания адаптивного меню навигации, которое отличается дизайном на разных размерах экрана.
Пример
/* Navbar ссылки */
.topnav a
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* На экранах шириной 600px или меньше, сделайте ссылки меню сложенными друг на друга, а не рядом друг с другом. */
@media screen and (max-width: 600px) .topnav a float: none;
width: 100%;
>
>
Медиа-запросы для столбцов
Распространенное использование медиа-запросов, заключается в создании гибкого макета. В этом примере мы создаем макет, который варьируется между четырьмя, двумя столбцами и столбцами полной ширины в зависимости от размеров экрана:
Примеры
/* Создайте четыре равных столбца, которые плавают рядом друг с другом */
.column
width: 25%;
>
/* На экранах шириной 992 пикселя или меньше происходит переход от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) .column width: 50%;
>
>
/* На экранах шириной 600px или меньше столбцы должны располагаться друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) .column width: 100%;
>
>
Совет: Более современный способ создания макетов столбцов заключается в использовании CSS Flexbox (см. Пример ниже). Однако это не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте float (как показано выше).
Чтобы узнать больше о модуле Flexible Box Layout, прочитайте раздел CSS Flexbox.
Чтобы узнать больше об адаптивном веб-дизайне, прочтите Учебник по адаптивному веб-дизайну на нашем сайте W3Schools на русском.
Пример
/* Контейнер для флексбоксов */
.row display: flex;
flex-wrap: wrap;
>
/* Создайте четыре равных столбца */
.column flex: 25%;
padding: 20px;
>
/* На экранах шириной 992 пикселя или меньше переходите от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) .column flex: 50%;
>
>
/* На экранах шириной 600px или меньше столбцы должны располагаться друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) .row flex-direction: column;
>
>
Скрыть элементы с помощью медиа-запросов
Другое распространенное использование медиа-запросов - скрытие элементов на экранах разных размеров:
Пример
/* Если размер экрана составляет 600 пикселей в ширину или меньше, скрыть элемент */
@media screen and (max-width: 600px) div.example display: none;
>
>
Изменить размер шрифта с помощью медиазапросов
Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на экранах разных размеров:
Пример
на 80px */
@media screen and (min-width: 600px) div.example font-size: 80px;
>
>
/* Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта в
Гибкая галерея изображений
В этом примере мы используем медиазапросы вместе с flexbox для создания адаптивной галереи изображений:
Пример
Гибкий веб-сайт
В этом примере мы используем медиа-запросы вместе с flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент.
Пример
Ориентация: Портретная (вертикальная) / Альбомная (горизонтальная)
Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.
У вас может быть набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире его высоты, так называемая "landscape" ("альбомная") ориентация:
Пример
Используйте светло-голубой цвет фона, если ориентация в альбомном режиме:
От минимальной ширины до максимальной ширины
Вы также можете использовать (max-width: ..) and (min-width: ..) значения для установки минимальной ширины и максимальной ширины.
Например, когда ширина браузера составляет от 600 до 900 пикселей, измените внешний вид элемента
Пример
@media screen and (max-width: 900px) and (min-width: 600px) <
div.example <
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
>
>
Используя дополнительное значение: В приведенном ниже примере мы добавляем дополнительный медиа-запрос к нашему уже существующему, используя запятую (это будет вести себя как оператор OR - или):
Пример
*/
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) div.example font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
>
>
CSS Справочник @media
Чтобы получить полный обзор всех типов мультимедиа и функций / выражений, ознакомьтесь с @media правилами в CSS справочнике.
Совет: Чтобы узнать больше об адаптивном веб-дизайне (как настроить таргетинг на разные устройства и экраны), используя брэкпоинты медиа-запросов, прочитайте Учебник по адаптивному веб-дизайну на нашем сайте W3Schools на русском.
Нужны ли вообще медиа-запросы?
Flexbox, CSS Grid и многоколоночная верстка (Multi-column layout) адаптивны по умолчанию, так как их спецификации были написаны в мире, где адаптивный дизайн и кросс-девайсность уже стали реальностью. Это значит, что они уже включают в себя множество функций, которые позволяют легко создавать адаптивные сетки.
В этом CodePen приведены примеры того, как Multi-column, Flexbox и Grid меняют размеры и положение в соответствии с доступным пространством. Здесь нет медиа-запросов и совсем немного CSS.
Используя гибкость этих методов компоновки, мы можем создавать гибкие блоки, которые будут по-разному располагаться в зависимости от доступного пространства экрана без использования медиа-запросов. Например, объект мультимедиа, который вы хотите отобразить колонкой, когда пространство ограниченно, и как строка, когда пространства достаточно. Этого можно достичь с помощью всего нескольких строк CSS.
Допустим flex-basis для наших элементов составляет 250px. Если нет места для двух 250px колонок, они будут выстраиваться в колонку, а если задать положительный flex-grow они еще будут заполнять все доступное пространство.
Когда есть достаточно места для отображения двух колонок
Контент в одну колонку
Одна из особенностей использования Flexbox в том, что доступное пространство для блока ограничено или размером экрана или контейнером с меньшим доступным пространством. Медиа-запросы не могут решить эту задачу, поскольку они смотрят только на доступные размеры всего экрана. Таким образом, новые способы компоновки контента позволяют нам реализовать то, что не могут медиа-запросы.
В примере ниже показано, как контент может быть ограничен вьюпортом (измените размер окна, чтобы увидеть гибкость) и контейнером.
Только в том случае, если такого поведения сеток вам недостаточно, стоит задуматься о применении медиа-запросов. В связке медиа-запросов и CSS Grid вы можете полностью переопределить сетку. Медиа-запросы и CSS Grid отлично дополняют друг друга. Всего одной строкой CSS мы можем переопределить, как и где элементы будут расположены в сетке без изменения разметки. Начнем с одноколоночной сетки для узкой ширины.
Для более широкой сетки я использую медиа запрос для переопределения количества колонок и задаю свойство, чтобы некоторые блоки охватили несколько соседних ячеек.
Сочетание уместно примененных медиа-запросов и новых методов компоновки предоставляет нам множество возможностей для достижения наилучшего UX на любом устройстве. В этом CodePen я объединила сетку выше с чуть ранее созданным медиа-объектом. Как вы видите, для контента вполне достаточно места на десктопе, но когда доступная область для содержимого становится слишком узкой, сетка преобразуется медиа-запросом, а блоки встают в одну колонку без медиа-запроса.
Медиа-запросы — лучшие практики
Думаю мы все согласимся, что медиа-запросы нам все еще нужны, но способы их применения однозначно меняются. Ниже приведены несколько советов, как использовать медиа-запросы в 2018 году по максимуму.
НЕ ОРИЕНТИРУЙТЕСЬ НА УСТРОЙСТВА, ДОБАВЬТЕ КОНТРОЛЬНЫЕ ТОЧКИ КОГДА СЧИТАЕТЕ, ЧТО СЕТКУ НАДО ПЕРЕСТРОИТЬ
Когда мы впервые начали использовать медиа-запросы, существовало очень мало устройств, о которых стоило бы беспокоиться. Большинство людей волновал iPhone. Однако, в течение нескольких месяцев, рынок устройств и разнообразие их размеров быстро расширился. Нет смысла ориентироваться на отдельные устройства. Вместо этого просто добавьте контрольные точки, где ваша сетка должна перестраиваться. Если растянуть окно браузера с мобильным дизайном, строки текста становятся слишком длинными. Заметили, что стало некомфортно читать? Именно в этот момент, на этой ширине можно добавить медиа-запрос и написать несколько дополнительных CSS свойств.
Таким образом, девайсы, размер экрана которых меньше этой контрольной, точки получат сетку для мобильных устройств, а те, что больше — сетку, которая использует все доступное горизонтальное пространство окна. Не имеет значения, является ли устройство iPhone, смартфоном Samsung или даже веб-дизайнером играющим со своим окном браузера.
СУЩЕСТВУЮТ НЕ ТОЛЬКО ПИКСЕЛИ
Создавая контрольные точки подумайте о переходе с пикселей. Слишком длинная строка текста является основным признаком, что пора задать контрольную точку. Лучше использовать em вместо пикселей, это обезопасит от случаев, когда у пользователя размер шрифта больше ожидаемого.
БУДЬТЕ ОСОБЕННО ОСТОРОЖНЫ МЕНЯЯ ПОРЯДОК FLEX И CSS GRID ЭЛЕМЕНТОВ
Дразнящая возможность CSS Grid и, в меньшей степени Flexbox — возможность изменить порядок элементов на разных контрольных точках. Этот функционал может обеспечить отличный UX для пользователей, пользующихся клавиатурой и мышью. Но для пользователей, которые используют свой палец для управления, это может создать значительные неудобства. В частности, это пользователи с плохим зрением. Хоть они и используют скринридер, но все равно могут видеть многое из того, что находится на экране. Также это касается пользователей, которые перемещаются на экране с помощью клавиатуры или какого-либо устройства отличного от мыши или пальца.
Эти пользователи переходят из заголовка к заголовку, от ссылки к ссылке, и их устройства будут следовать порядку, в котором элементы указаны в источнике документа, а не в порядке, который они отображают на экране. Если вы изменяете порядок контента на разных контрольных точках, обязательно перепроверьте, на сколько удобно перемещаться по вашему сайту при помощи клавиатуры.
НЕ ЗАБУДЬТЕ ПРО ВЕРТИКАЛЬНЫЕ МЕДИА-ЗАПРОСЫ
Большинство разработчиков ассоциируют медиа-запросы с шириной устройств. Главное — обеспечить достаточно горизонтального пространства для отображения нескольких столбцов контента. Но медиа-запросы можно использовать и для проверки доступной высоты.
Вертикальные медиа-запросы могут быть полезными, например, когда нужно убедиться, что экран имеет достаточно высоты для отображения и просмотра контента в несколько колонок рядом без необходимости прокрутки вверх и вниз. В приведенном ниже CSS, многоколоночная сетка будет перестраиваться только в том случае, если достаточно места для двух колонок по 15em. Я добавила медиа-запрос с min-height, чтобы проверять, когда достаточно высоты чтобы чем начинать выстраивать колонки. Если это небольшой экран в альбомном режиме, то покажется только один столбец, чтобы пользователь мог прокручивать вниз и читать.
Медиа-запросы Level 4: Что ожидать?
Медиа-запросы, которые мы используем для создания адаптивного дизайна пришли к нам из спецификации CSS Level 3. Новая спецификация медиа-запросов Level 4 разрабатывается рабочей группой CSS. Эта спецификация добавит новый функционал, и произойдут некоторые изменения в синтаксисе. Не все еще реализовано и не все работает даже в современных браузерах, но уже стоит обратить внимание на новую спецификацию и изучить, что же может произойти в ближайшее время. Это поможет нам быть готовыми создавать пользовательские интерфейсы, которые хорошо работают с широким спектром устройств и разнообразием форматов вывода.
Определяем устройство ввода, а не размер экрана
Размер экрана — довольно грубый способ определить, каким устройством пользуется пользователь и как взаимодействует с ним. Современные экранные устройства — невероятно мощные мини-компьютеры. Пользователь может работать на своем телефоне с помощью внешней клавиатуры и мыши даже с небольшим размером экрана; вполне способен нажимать на маленькие элементы интерфейса. Но это может быть и большой планшет с громадным экраном — мобильная версия ему не подойдет. Однако, владельцы таких планшетов используют свой палец в качестве указывающего устройства, поэтому у них нет возможности сделать нормальное наведение, да и их пальцы не так точны, как указатель мыши.
Раньше мы могли выяснить только размер экрана пользователя, сейчас ситуация несколько иная. Теперь мы можем определить может ли пользователь наводить на элементы, а так же тип его указателя, будь то палец или мышь. Свойства pointer и hover помогут улучшить UX для разных типов пользователей и собирать более точные статистики. Приведенные ниже примеры будут работать в текущих версиях Chrome, Safari и Edge. Вы можете проверить, Can I Use для полного списка поддержки браузерами.
Нижеприведенный CodePen вы можете протестировать с любого мобильного браузера. Свойство content выведет результат проверки типа указателя, которым вы пользуетесь.
Чтобы узнать, можете ли вы навести курсор, проверим доступность функции наведения:
Тестирование поддержки курсора и состояния наведения на iPhone
Протестируйте сами в CodePen.
Существуют также свойства any-pointer и any-hover, которые проверяет все доступные возможности любого планшета и смартфона к указателям и наведениям. Следует проявлять большую осторожность при использовании этих свойств, поскольку переход пользователя с основного устройства указания может привести к плохому UX. Спецификация гласит:
Firefox — браузер отстающий от реализации данного функционала. Вот ссылка на этот баг. Надеюсь, вскоре мы увидим полную поддержку.
Переполнение контента и Display Quality Media Features
Пока еще не реализованное свойство overflow-block, часть Display Quality Media Features, позволит проверить то, как поведет себя блок при переполнении контентом.
Медиа-запросы должны быть разными когда происходит переполнение контента. Стандартный способ решения данной проблемы для планшетов и десктопа — добавление прокрутки. Но некоторые устройства, например, электронный рекламный щит не могут переполняться. Так же у нас есть, Paged Media, если вы выводите контент для печати,.
Есть еще одно полезное свойство, которое поможет определить на каком устройстве отображается контент — overflow: block. Например, вы хотите проверить Paged Media ли контент.
Синтаксические изменения
Медиа-запросы — такие, какими мы их знаем, достаточно объемные в написании. Изменения синтаксиса медиа-запросов Level 4 поможет с этим. Часто мы используем диапазоны, например между 40em и 59em.
Мы могли бы записать как диапазон в таком виде:
Во втором примере кода мы ставим условие, что ширина должна быть больше или равна 40em, а также меньше или равна 59em. Это намного проще и короче, нежели префиксы с минимальной и максимальной шириной первого примера. По прежнему можно будет использовать старый синтаксис. Тем не менее, такая менее объемная альтернатива кажется очень полезной.
Медиа-запросы по-прежнему являются полезным инструментом в нашем арсенале для создания адаптивных сеток. Я видела, как люди лезли вон из кожи с CSS Grid, дабы избежать использования пары медиа-запросов, но нет причин избегать их. Как я надеюсь, я продемонстрировала, что есть новые и полезные функции, которые помогут нам улучшить наши пользовательские интерфейсы для большего количества пользователей. Вот несколько дополнительных ссылок, статей и презентаций, чтобы изучить данный материал подробнее. Некоторые из них я использовала при подготовке этой статьи, другие полезны для дополнительного чтения.
Нужны ли вообще медиа запросы?
Flexbox, Grid Layout и макет Multi-column по умолчанию адаптивны. Эти спецификации были написаны, когда уже был адаптивный дизайн и поддержка нескольких устройств. Поэтому в них много общей функциональности, активирующей адаптивный дизайн без лишней возни.
В демо ниже представлены гибкие компоненты Multicol, Flexbox и Grid. Все меняют свой размер и макет под доступное пространство. В примере не используются медиа запросы, всего пара строк CSS.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Можно создавать гибкие компоненты, которые будут по-разному подстраиваться под пространство на экране без медиа запросов, используя встроенную гибкость методов разметки. Например, можно отображать медиа объект в виде колонки, когда пространство ограничено, и как строка, когда пространства достаточно. Сделать это можно парой строк CSS.
flex-basis для флекс элементов – 250 пикселей. Если для двух элементов размером 250 пикселей места не хватает, они отображаются друг под другом. Элементы могут расти (flex-grow – положительное значение), поэтому они будут расти и заполнять строки.
Замечательное свойство Flexbox заключается в том, что компонент ведет себя так в случае, если пространство ограничено размером экрана или компонент помещен в контекст, где у него меньше пространства в контейнере. Медиа запросы не могут решить эту проблему, так как они смотрят на функции всего экрана. Таким образом, новый макет дает нам то, чего не могут медиа запросы.
В демо ниже компонент ограничен вьюпортом (измените размер окна, чтобы оценить гибкость) и контейнером.
Далее с помощью медиа запросов я переопределяю количество колонок, а также задаю элементы, которые растягиваются на несколько колонок в сетке на больших экранах.
Тщательно подобранные медиа запросы и наследственная адаптивность этих новых методов макетирования дает нам возможность использовать все пространство экрана и предоставлять лучше UX пользователям на любых устройствах. В следующем демо я соединил макет сверху и ранее созданный медиа запрос. Заметьте, как макет трансформируется с помощью медиа запроса по мере уменьшения пространства на экране. Когда область контента становится слишком узкой, компонент схлопывается до одной колонки – без отсылки к медиа запросу.
Лучшие практики медиа запросов
Как мы видим, медиа запросы не ушли. Но изменился способ их применения. Ниже собраны советы по наилучшему использованию медиа запросов в 2018.
Не определяйте устройства — добавляйте брейкпоинты, когда дизайн должен меняться
Когда мы только начали использовать медиа запросы, устройств было не так много. В действительности, большинство заботились только об iPhone. За пару месяцев устройства и их размеры быстро увеличились. Определять конкретные устройства стало бесполезно. Вместо этого добавляйте брейкпоинты на те размеры, когда дизайн должен меняться. Если начать с дизайна для самого маленького устройства и растягивать окно браузера, в какой момент строки станут слишком длинными для удобного чтения? Когда экран можно использовать лучше? Это и есть та точка, где можно добавить медиа запрос и написать дополнительный CSS.
Таким образом, устройства, попадающие под брейкпоинт получат узкий макет, а все что превосходит брейкпоинт – макет, использующий больше горизонтального пространства на экране. И неважно, iPhone это или Samsumg, или веб-дизайнер, играющийся с окном браузера.
Пиксели используются не везде
При создании брейкпоинтов откажитесь от пикселей. Если строка слишком длинная, это явный индикатор, того, что дизайн должен измениться. Дизайну нужен брейкпоинт. Лучше всего указывать такие точки не в пикселях, а в em единицах. Так вы получите однообразный результат, если текст у пользователя будет больше ожидаемого.
Уделите больше внимания сортировке flex и grid элементов
Преимущество Grid Layout по отношению к Flexbox заключается в возможности изменить порядок элементов в макете на разных брейкпоинатах. Для пользователей мобильных устройств и десктоп пользователей с клавиатурой и мышью это обеспечит отличный UX. Однако некоторых пользователей это может запутать. В частности, это пользователи с плохим зрением, пользующиеся скрин ридером, но которые видят большую часть контента на экране, а также те пользователи, которые перемещаются по сайту с помощью клавиатуры или устройства, отличного от мыши или пальцев.
Такие пользователи прыгают от заголовка к заголовку, от ссылки к ссылке. Их устройства следуют порядку элементов, который задан в разметке, а не порядку отображения на экране. Если меняете порядок контента на разных брейкпоинтах, убедитесь, что по сайту все еще можно перемещаться с помощью клавиатуры.
Не забывайте о вертикальных медиа запросах
Как правило, мы думаем о медиа запросах под ширину устройства, проверяя, достаточно ли нам места для отображения колонок с контентом. Медиа запросы можно также использовать для проверки доступной высоты.
Один из примеров использования вертикальных медиа запросов или медиа запросов по высоте – проверка того, что высоты экрана достаточно для отображения многоколоночного макета без необходимость скролить окно вниз. В CSS коде ниже многоколоночный макет создаст колонки только, если места хватает под 2 колонки размером 15em. Поэтому нам не нужен медиа запрос по ширине. Я добавил медиа запрос min-height, чтобы текст перепрыгивал в колонки только при достижении разумной высоты. Если экран маленький и в альбомном режиме, я покажу только один столбец, и пользователь будет скролить вниз для чтения.
В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.
Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.
В HTML4 медиа-запрос записывался следующим образом:
Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:
Предусматривая возможность введения новых значений и значений с параметрами в будущем, для браузеров была реализована поддержка значений атрибута медиа-носителя, указанных следующим образом:
Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.
Медиазапросы, характеристики устройств и разрешения экрана
Поддержка браузерами
IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0
Рис. 1. Пример адаптивной верстки на основе медиазапросов
1. Что такое медиа-запрос
В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.
Медиа-запросы могут быть добавлены следующими способами:
1) С помощью HTML:
2) С помощью правила @import внутри элемента
4) Внутри таблицы стилей style.css:
2. Логические операторы
С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.
2.1. Оператор and
Оператор and связывает друг с другом разные условия:
Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px .
Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.
Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.
2.2. Оператор запятая
Оператор запятая работает по аналогии с логическим оператором or .
В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.
2.3. Оператор not
Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос
будет эквивалентен запросу
Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос
будет эквивалентен запросу
2.4. Оператор only
Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).
Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media="only" . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.
3. Тип носителя
Тип носителя представляет собой тип устройства, например, принтеры, экраны.
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. |
| Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. | |
| screen | Предназначен в первую очередь для экранов цветных компьютерных мониторов. |
| speech | Предназначен для синтезаторов речи. |
CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.
4. Характеристики носителя
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
| Параметр | Описание |
|---|---|
| width | Проверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (width: 800px) . Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе. |
| height | Проверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (height: 500px) . Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе. |
| aspect-ratio | Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9) . min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра. |
| orientation | Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape) . |
| resolution | Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi) . min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное. |
device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.
5. Метатег viewport
Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.
Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .
При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.
Рис. 2. Разница между width и device-width
6. На какие размеры экрана нужно ориентироваться
При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.
Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.
7. Стратегии использования медиа-запросов
Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.
Читайте также: