Медиа-запросы в CSS


Содержание

Как использовать медиа запросы CSS3 чтобы создать версию вашего сайта для мобильных устройств

CSS3 продолжает одновременно восхищать и разочаровывать веб дизайнеров и разработчиков. Восхищают возможности, которые предоставляет CSS3, но разочаровывает практически полное отсутствие поддержки в Internet Explorer 8. В данной статье демонстрируется техника использования CSS3, которая не поддерживается в Internet Explorer 8. Однако, для тех, кому приходится обеспечивать поддержку мобильных устройств (например, iPhone или тех, которые используют Android) такой недостаток будет безразличен.

В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.

Медиа запросы

Если вам когда-нибудь приходилось создавать стиль для печати страниц веб сайта, то вы уже знакомы с идеей создания специальных таблиц стилей, которые работают в определенных условиях (в данном случае таблица стилей используется при печати страницы). Такой функционал был добавлена в CSS2 с помощью типов носителей . Типы носителей позволяют задавать целевой тип носителя информации, то есть можно определить стили для целей print (печать), handheld(мобильное устройство) и так далее. К сожалению, типы носителей никогда не получали широкой поддержки в устройствах, поэтому они, за исключением типа носителя print, очень редко используются.

Медиа запросы в CSS3 подхватывают данную идею и развивают ее. Но в дополнение к определению типа устройства они позволяют получить сведения о его возможностях. Например:

  • ширина и высота окна просмотра
  • ориентация – например, мобильное устройство выводит информацию в альбомном или портретном режиме?
  • разрешение

Если у пользователя браузер, который поддерживает медиа запросы, то мы можем написать CSS специально для определенной ситуации. Например, определить, что пользователь использует маленькое устройство (например, смартфон) и выдать ему специфический шаблон страницы.Примером применения такой техники может служить сайт конференции dConstruct.

Веб сайт dConstruct 2010 в браузере Safari на экране компьютера.

Веб сайт dConstruct 2010 на экране iPhone

На выше приведенном примере видно, что сайт не просто уменьшается в размерах, а изменяется архитектура его контента, чтобы облегчить восприятие информации на маленьком экране мобильного устройства. Некоторые могут подумать, что просто используется шаблон iPhone, но это не так.. Такой же вид будет и в Opera Mini в телефоне с ОС Android. С помощью медиа запросов и определения возможностей устройства веб сайт dConstruct может обслуживать любой вид устройств, даже таких, о которых разработчики понятия не имели!

Использование медиа запросов для создания таблицы стилей для телефонов

Чтобы начать давайте рассмотрим очень простой пример. Шаблон, представленный ниже — очень простой и имеет всего две колонки.

Простой шаблон с двумя колонками.

Чтобы облегчить чтение на экране телефона, линеаризуем весь дизайн, выстроив только одну колонку, а также сделаем область заголовка меньше, чтобы читателю не нужно было прокручивать страницу до начала контента.

Первый способ использования медиа запросов — создание альтернативной секции CSS прямо в той же таблице стилей. Так, чтобы определить целью маленькие устройства, можно использовать следующий синтаксис:

Затем можно добавить альтернативные правила CSS для маленького экрана в секцию, ограниченную фигурными скобками. Таким образом мы просто переопределяем любые правила, установленные для обычных браузеров ранее в нашей CSS таблице. Так как данная секция располагается последней в файле CSS, то она изменяет предыдущие правила. Таким образом, для линеаризации шаблона и уменьшения секции заголовка нужно добавить следующие строки:

В приведенном коде используется альтернативное фоновое изображение и уменьшается высота и ширина заголовка, затем устанавливаются опции для контента и навигации float: none; и изменяется установка ширины, которая определялась ранее в таблице стилей. Данные правила действуют только для устройств с маленьким размером экрана.

Вид примера на экране iPhone.

Присоединение отдельной таблицы стилей с использованием медиа запросов

Вставка специфического кода для мобильных устройств в основную таблицу стилей может быть хорошим решением в случаях, когда нужно сделать небольшие изменения. Однако, если таблица стилей содержит большое количество свойств, которые нужно изменить для вывода содержимого на маленький экран, лучше сделать отдельный файл CSS для таких правил и присоединять его к странице сайта после основной таблицы стилей.

Присоединение таблицы стилей для мобильных устройств:

Testing media queries

Если вы являетесь владельцем iPhone, телефона с ОС Android или другого устройства, которое имеет браузер, поддерживающий медиа запросы, то можно проверить работу измененного CSS на них. Хотя потребуется загрузить код сайта, чтобы посмотреть на него. А как быть в том случае, если такого устройства нет или нужно провести проверку локально?

В процессе разработки вам может помочь отличный сайт ProtoFluid. Он предоставляет форму для ввода URL и просмотра дизайна, как он будет отображаться на экране iPhone, iPad или другого подобного устройства. Изображение ниже показывает вид сайта dConstruct, который представлен сервисом ProtoFluid для iPhone.

Сайт dConstruct, представленный сервисом ProtoFluid для вида на iPhone.

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

Для использования ProtoFluid вам нужно немного изменить медиа запрос, который мы использовали ранее, чтобы добавить опцию max-width. Это будет означать, что медиа запрос будет действовать в том случае, если пользователь использует обычный браузер, но в очень маленьком окне.

После обновления кода, просто перегрузите страницу и уменьшите размер окна, когда он достигнет 480 px, шаблон страницы измениться. Медиа запрос теперь реагирует, когда размер окна просмотра соответствует введенным вам значениям.

Теперь все готово, чтобы использовать ProtoFluid. Основное преимущество ProtoFluid заключается в том, что можно использовать инструменты разработчика , такие как FireBug, для настройки дизайна, что весьма затруднительно на iPhone. Конечно, вы можете пробовать ваш сайт на различных устройствах, но ProtoFluid делает процесс разработки и тестирования значительно проще.

Если вам не нужно, чтобы шаблон сайта изменялся, когда кто-нибудь уменьшает размер окна браузера, вам нужно просто удалить часть max-width запроса перед тем, как открыть доступ к сайту. Таким образом только те, кто смотрит сайт с маленького устройства, будут видеть измененный шаблон страниц.

Настройка существующего сайта

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

Шаблон страниц

Рассматриваемый сайт использует шаблон фиксированной ширины с тремя колонками. Дизайн был разработан пару лет назад и медиа запросы тогда не принимались во внимание во время разработки.

Добавление нового файла стилей

Чтобы сделать линеаризацию сайта нужно провести много изменений, таким образом, нужно добавить новый файл с таблицей стилей после основного и с условием использования только при значении max-width меньше 480 px.

Для создания нового файла с таблицей стилей берем основной файл сайта и сохраняем его как small-device.css. Таким образом, он начинает жить как копия основного фала с таблицей стилей. Далее в нем надо переписать несколько правил и удалить все ненужное.

Сжатие заголовка

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

Линеаризуем шаблон

Далее нужно линеаризовать шаблон и сделать одну колонку. Шаблон создан с использованием плавающих блоков, поэтому надо найти все правила, которые делают колонки плавающими и установить для них свойства float: none и width:auto. Таким образом все колонки выстроятся одна под другой.

«Причесываем»

Теперь посмотрим на шаблон в ProtoFluid и точно настроим размеры полей и отступов для различных областей, которые будут отличаться от того, что установлено для обычного шаблона. С использованием Firebug для ProtoFluid такая работа выполняется быстро и легко, а получившийся набор правил CSS затем копируется в таблицу стилей.

Проверяем сайт в ProtoFluid.

Проверка сайта на iPhone

При проверке на iPhone выяснилось, что сайт не масштабируется в одну чудесную колонку. На сайте разработчиков Safari есть решение для такой проблемы — нужно добавить тег meta к заголовку сайта. в котором устанавливается ширина окна просмотра равной ширине дисплея устройства.

После добавления тега meta сайт стал выводиться как было задумано — в одну колонку:

Вид сайта на экране iPhone.

Простая модификация сайта позволяет сделать легко ваш ресурс доступным для пользователей мобильных устройств.

Заключение

Использованием медиа запросов может ввести CSS3 в вашу повседневную деятельность. Стоить помнить о том, что браузеры, которые поддерживают медиа запросы, также поддерживают все остальные свойства CSS3. Таким образом можно использовать все возможности CSS3, когда пользователь использует iPhone или другое мобильное устройство.

Media queries CSS как АДАПТИРОВАТЬ сайт

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.

See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.

Из видео вы узнаете:

  • что такое Media queries и его составляющие элементы;
  • как формируется медиа запросы;
  • рассмотрим практически пример адаптивного дизайна сайта.

CSS3 медиа запросы или (media queries) – это определенный набор стилей и логических выражений, которые позволяют применять различные стили в зависимости от выполнения каких то дополнительных условий.

Используются для проверки ширины и высоты окна браузера, а также ширины и высоты экрана устройства, проверки его ориентации (альбомная или портретная) и многое другое.

Медиа запрос состоит

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

Типы носителя

В се запросы начинаются с правила @madia , далее идет условие, в котором пишем тип носителя (screen) , он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print , all и speech .

Типы носителей включают в себя

  • all – Подходит для всех видов устройств. Это значение используется по умолчанию.
  • print – Просмотр на экране страничек в режиме предварительного просмотра печати.
  • screen – Просмотр на экране цветных компьютерных мониторах.
  • speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.

Устаревшие типы носителей:

  • braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
  • embossed — Принтеры, использующие для печати систему Брайля.
  • handheld — Смартфоны и аналогичные им аппараты.
  • projection – Проекторы.
  • tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
  • tv – Телевизоры.

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

Логические операторы

З атем идут логические операторы, при помощи которых можно писать дополнительные условия, если это необходимо.

К примеру, and , эквивалентно «И» , и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью.

Следующий оператор «запитая» , которая эквивалентна «ИЛИ» , и в данном случае если одно из условий верное, значит выражение является истиной.

Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.

Логические операторы:

  • and – Связывает друг с другом разные условия (эквивалентно «и»);
  • not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
  • only – Скрывает стили для браузера, которые не поддерживают данные условия;
  • , — Запятая работает по аналои с логическим оператором or (эквивалентно «или»);
Илон Маск рекомендует:  Переменные окружения

Условие медиа запроса

Затем идет условие, где можно задавать ширину области просмотра, ее высоту, проверять соотношение сторон, ориентацию, разрешения экрана в пикселях и так далее. В принципе их там не много, более подробный список будет в описании под роликом.

Самые распространенные условия это максимальная и минимальная ширина max-width min-widt

Прописав ( max-width: 480px ), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.

Именно на таких примерах базируется адаптивная верстка, когда нам нужно применить стили под определенные расширения экраны мобильного устройства и все это делается через CSS (media queries).

  • width min-width max-width – ширина;
  • height min-height max-height – высота;
  • device-width min-device-width max-device-width – ширина на устройстве;
  • device-height min-device-height max-device-height orientation — высота на устройстве;
  • aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
  • device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio — соотношение сторон на устройстве;
  • resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
  • color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
  • color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
  • monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
  • scan grid – сетка сканирования;

Описываем основную структуру в HTML и CSS

Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.

Создаем пять блоков, шапка сайта header , верхнее меню top_menu , левый сайт бар sideLeft , область для контента content и подвал footer .

Затем определим для них стили

Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.

Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.

Сайт бару, прописываем свои стили и прижмем его к левому краю:

Далее для области под контент пишем свои стили:

И завершающий блок это футер, делаем его на всю ширину в своем цвете:

Из-за того что sideLeft и content являются плавающими элементами за счет float , нужно сбросить обтекание этих блоков при помощи clear:both; .

Создадим класс и вставим дополнительный блок с этим классом:


У нас получился такого рода резиновый шаблон сайта, условно разделенный на блоки.

Подключаем CSS media queris

Для наглядной адаптации, сделаем шаблон фиксированной ширины, обернем все наши блоки в обертку, назначим обертке ширину в 980 пик. и отцентрируем по середине экрана.

Затем для всех медиа запросов создадим отдельный файл media-queries.css , который подключим после основного стиля.

Размер экрана меньше 992px

Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.

Начинаем с правила @media , скрываем стиле для браузеров которые их не поддерживают only , затем пишем носитель screen и логический оператор and « И », далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.

Затем, в фигурных скобках описываем стили для данного расширения:

Ширину обертки уменьшим на 750 пик.

Поменяем у блоков цвет, а у footer немного уменьшим высоту:

Размер экрана меньше 768px

Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.

Обертку уменьшаем до 450 пик.

У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.

Тоже самое проделаем с top_menu

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

Для наглядности добавим в сайт бар дополнительные блоки и оформим их надлежащим образом.

Убираем высоту .sideLeft

Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.

Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:

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

Затем опишем общие стили, и скроем их:

Размер экрана меньше 480px

Затем опишем стили под маленькие расширения экранов которые подходят под мобильные устройства.

Делаем обертку в 320 пик.

У остальных блоков поменяем цвет.

Для более, плавных переходов, воспользуемся свойством transition, и применим его ко всем элементам.

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

Подключаем Media Queries Javascript

Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js .

Я показал базовые принципы адаптивного дизайна, но есть и другие методы которые во много раз упрощают данную работу. Следите за нашим сайтом и обязательно о них узнаете.

СSS3 Медиа Запросы — Примеры

CSS Медиа запросы — примеры

Рассмотрим еще несколько примеров использования медиа запросов.

Медиа запросы — популярный метод установки адаптированной таблицы стилей на различные устройства.
Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:

Пример

/* Установите цвет фона body tan */
body <
background-color: tan;
>

/* На экраны, которые 992px или меньше, установить цвет фона blue */
@media screen and (max-width: 992px) <
body <
background-color: blue;
>
>

/* На экранах с разрешением не более 600 пикселей, установите цвет фона olive */
@media screen and (max-width: 600px) <
body <
background-color: olive;
>
>

Вы задаетесь вопросом, почему мы используем именно 992 пикселя и 600 пикселей? Это то, что мы называем «типичными точками прерывания» для устройств. Вы можете прочитать больше о типичных точках прерывания в нашем Учебник адаптивный веб дизайн.

Медиа запросы для меню

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

Пример

/* Контейнер навигации */
.topnav <
overflow: hidden;
background-color: #333;
>

/* Навигационные ссылки */
.topnav a <
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* На экранах шириной 600 пикселей или меньше сделайте стек ссылок меню сверху друг друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.topnav a <
float: none;
width: 100%;
>
>

Медиа запросы для столбцов

Общее использование медиа запросов, создать гибкий макет. В этом примере мы создаем макет, который варьируется от четырех, в два столбца и столбцы полной ширины, в зависимости от различных размеров экрана:

Пример

/* Создайте четыре одинаковых столбца, которые плавают рядом друг с другом */
.column <
float: left;
width: 25%;
>

/* На экранах с разрешением 992px широко или более менее, пойдите от четырех колонн в две колонны */
@media screen and (max-width: 992px) <
.column <
width: 50%;
>
>

/* На экранах, которые 600 пикселей в ширину или меньше, сделать столбцы укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.column <
width: 100%;
>
>

Совет: Более современным способом создания макетов столбцов является использование CSS Flexbox (см. пример ниже). Однако, не поддерживается в Internet Explorer 10 и более ранних версий. Если вам требуется поддержка IE6-10, используйте поплавки (как показано выше).

Чтобы узнать больше о модулях гибких боксах макета модели, прочитайте нашу главу CSS3 Гибкий Бокс.

Чтобы узнать больше об адаптивном веб дизайне, прочитайте нашу Учебник Адаптивный Веб Дизайн .

Пример

/* Контейнер для flexboxes */
.row <
display: flex;
flex-wrap: wrap;
>

/* Четыре равные колонки */
.column <
flex: 25%;
padding: 20px;
>

/* На экранах, которые 992px или менее, уятановить от четырех колонн в две колонны */
@media screen and (max-width: 992px) <
.column <
flex: 50%;
>
>

/* На экранах шириной 600 пикселей или менее столбцы укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.row <
flex-direction: column;
>
>

Скрыть элементы медиа запросов

Другим распространенным использованием медиа запросов является скрытие элементов на экранах разного размера:

Пример

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экрана:

Переменный размер шрифта.

Пример

в 80 пикселей */
@media screen and (min-width: 600px) <
div.example <
font-size: 80px;
>
>

/* Если размер экрана 600px широкий, или меньше, установите размер шрифта

Гибкая галерея изображений

В этом примере мы используем медиа запросы вместе с flexbox для создания отзывчивой галереи изображений:

Пример

Гибкий сайт

В этом примере мы используем медиа запросы вместе с flexbox для создания адаптивного веб сайта, содержащего гибкую панель навигации и гибкий контент.

Пример

Ориентация: Книжная/Альбомная

Медиа-запросы также могут быть использованы для изменения формата страницы в зависимости от ориентация браузера.

Вы можете иметь набор свойств CSS, которые будут применяться, когда окно браузера шире, чем его высота, так называемый «Альбомная» ориентация:

Пример

Использовать светло-голубой цвет фона, если альбомный режим:

Минимальная ширина и максимальная ширина

Вы также можете использовать значения ( max-width: ..) и ( min-width: .. ) минимальной ширины и максимальной ширины.

Например, если ширина браузера составляет от 600 до 900px, измените внешний вид элемента

Пример

Использование дополнительного значения: В приведенном ниже примере мы добавим дополнительный запрос к нашему уже существующиму, используя запятую (это будет вести себя как оператор или):

Пример

CSS Справочник @media

Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите на правило @media в нашей справочнике CSS.

Совет: Чтобы узнать больше об адаптивном веб дизайне (как настроить задание на различные устройства и экраны), используя точки остановки медиа запросов, прочитайте нашу статью Учебник Адаптивный Веб Дизайн.

Медиа-запросы CSS

Такое понятие, как медиа-запросы, появилось в CSS3. С их помощью можно определять внешний вид веб-страниц, опираясь на ширину и высоту окна браузера. Благодаря медиа-запросам вы можете параллельно создавать стили для небольших мобильных телефонов, планшетов, лэптопов и мониторов с большой диагональю.

Идея адаптивного дизайна — предоставить посетителям сайт в наиболее читаемой и привлекательной форме. Дизайн создается под как минимум три целевых экрана: настольный ПК, планшет и смартфон. Но учитывая большое количество вариаций этих девайсов, недостаточно остановиться на какой-то одной ширине для каждого типа устройства. Поэтому важно использовать гибкую сетку и проводить тестирование в процессе разработки, отслеживая то, как подстраивается дизайн сайта под разную ширину браузерного окна.

Когда использовать медиа-запросы?

Как правило, для адаптации дизайна веб-страницы необходимо прописать ряд CSS-стилей для определенных элементов. Ниже мы перечислим наиболее частые сценарии, когда вам понадобится обратиться к медиа-запросам.

  • Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
  • Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
  • Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
  • Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
  • Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
  • Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:

Илон Маск рекомендует:  Недокументированные возможности ms dos прерывания 30h и 31h

Mobile First или Desktop First?

Когда вы пишете стили для контрольных точек, вы не создаете весь дизайн с нуля, а лишь корректируете существующую верстку. Возникает вопрос, под что верстать изначально: под настольные компьютеры с последующей корректировкой под мобильные устройства или же наоборот — сначала создать версию для небольших экранов, а затем расширить ее? Рассмотрим оба подхода.

  • Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media .
  • Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

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

Синтаксис медиа-запросов

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана ( min-width ), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width , тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.

Далее в учебнике: принцип создания гибкой сетки в CSS.

Блог Vaden Pro

  • 176 просмотров

Характеристики свойства

В каких браузерах работает?

9.0+ 1.0+ 10.0+ 4.0+ 3.6+ 2.0+ 2.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
+

Для чего используется?


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

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

Как правильно задавать?

Ключевая характеристика медиа-запроса — это правило @media, с него необходимо начинать все запросы. После него указывают определенный тип устройства, для которого составляется оформление. За этим следует указание логического оператора и медиа-функции. Разновидность типов носителей, через которые может выводится информация, представлены ниже:

Носитель Пояснение
all Соответствует всем возможным носителям. Это значения установлено по умолчанию
braille Носитель, который работает по принципу Брайля. Такие устройства предназначены для людей, которые не видят.
embossed Принтеры, которые осуществляют печать информации по принципу Брайля (предназначено для людей с ограниченным зрением).
handheld Соответствует КПК и похожим устройствам.
print Печатающие устройства.
projection Проектор.
screen Монитор.
speech Устройство, которое считывает информацию и преобразует ее в голосовой формат. В качестве примера выступает речевой браузер.
tty Устройства, у которых прописан стандартный размер символов и дисплеев (к примеру, телетайп).
tv Телевизор.

Логические операторы с примерами использования в коде

Союз, который предназначен для объединения разных условий. Его логическое значение — «и». Ниже представлен пример, который формирует стилевое оформление для цветных носителей.

Частица, которая противоречит определенному условию или событию. В нижнем примере записан запрос на применение стиля ко всем существующим девайсам за исключением смартфонов

Стоит отметить, что данный оператор имеет не высокий приоритет считывания, поэтому он принимается во внимание системой в последний момент.

Применение этого оператора рассчитано на оптимизацию работы устаревших браузеров, которые могут не поддерживать медиа-запросы

Логические операторы исключают присутствие элемента, который в логическом смысле выполнял бы функции «или». Вместо этого применяются запятые. То есть в определенном наборе условий применение стилей будет осуществлено, если хотя бы одно из них подтвердится. Также следует отметить роль скобок в синтаксисе этих операторов, они предопределяют приоритет операции при считывании кода.

Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.

Медиа-функции

Функции осуществляют задачу по уточнению определенных технических характеристик при выводе документа. Принцип работы условия основывается на считывании истинного значения. Другими словами если программированное утверждение выполняется, то и стиль будет задействован.

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

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/).

color (min-color, max-color)

Эта функция подключает стилевое оформление в соответствии с цветовыми возможностями устройства, а именно количество бит на канал основного цвета. Для того, чтобы картина прояснилась, предлагаю рассмотреть простой пример. Предположим, что установленное значение наименьшей возможной цветовой гаммы является число 3. Это говорит о том, что устройство должно поддерживать 23 оттенков каждого из основного цвета. Просчитав все возможные комбинации цветов получим, что при таком значении, чтобы оформление применялось, нужно, чтобы устройство поддерживало как минимум 512 цветов. Ниже смотрим пример

color-index (min-color-index, max-color-index)

Эта функция имеет сходство с предыдущей по принципу работы, но определяет она слегка другой параметр. Цель проверки — определить количество цветов, которое может воспроизвести устройство. Значением опять же выступает число, только теперь никаких вычислений — указываем сразу необходимый параметр. Такая функция часто используется для определения параметров смартфонов, принтеров, экранов и телевизионных устройств.

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Данная функция создана для определения соотношения экрана устройства, для которого составлялось оформление. Для этого достаточно указать два числа, которые соответствуют высоте и ширине экрана. Эти два значения должны разделятся между собой слешем (/). Ниже показан пример для девайсов с соотношением 16:9 и более

device-height (min-device-height, max-device-height)

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

device-width (min-device-width, max-device-width)

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

Сообщает системе, что данное устройство вывода распознает только один шрифт, не используя при этом параметры его высоты и интервалов между строк и букв. Такие устройства в наше время уже редкость, но иногда все-таки попадаются. К примеру, банковские терминалы. Для таких устройств характерно использование единиц em (если все таки пришлось прибегнуть к форматированию), как показано в примере

height (min-height, max-height)

Работа функции очень похожа на CSS-свойство определения высоты элемента. В этом случае определяется высота активной зоны, которая захватывает определенный участок информации. Этот параметр зависит от высоты экрана устройства и не может привышать этот показатель, за исключением того случая, когда страница может масштабироваться.

monochrome (min-monochrome, max-monochrome)

Определяет показатель монохромности устройства. Это позволяет для черно-белого дисплея составить более простое в цветовом плане оформление. В качестве значения функции выступают обычные числа, которые сообщают нагрузку бит на 1 пиксель. Чтобы было более понятно, при укаании числа 8 будет осуществляться поиск устройства, которое сможет распозновать 256 оттенков необходимого цвета. К примеру,

Функция распознает ориентации страниц в устройстве. Существует две достаточно распространенные ориентации: альбомная и книжная. В первом случае у страницы ширина будет превышать показатель высоты, а во втором — с точностью до наоборот. Ниже представлен пример, в котором фоновое изображение меняется в зависимости от установленной ориентации устройства

resolution (min-resolution, max-resolution)

Устанавливает разрешения считывающего устройства, на основе чего будет применятся заданное оформление. Ниже показано, как можно определить оформление для принтера, у которого разрешение составляет 500 точек на дюйм рабочего пространства

Этпа функция предназначена только для работы с телевизорами. Таким образом можно определить способ считывания информации данным устройством. Вообще, существует 2 способа:

  1. Первый метод называется череcстрочный (interlace) — упрощенный способ считывания информации по которому сначала выводятся четные строчки кадра, а затем не четные.
  2. Прогрессивный (progressive) метод работает по сложному и выводит полную информацию и сразу.

width (min-width, max-width)

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

Медиа-запросы CSS3

Медиа-запросы разделяются в зависимости от пользовательского устройства, и в настоящее время поддерживаются два типа запросов — « screen » и « print «. Медиа-запросы обеспечивают расширяемость функционала сайтов и веб-приложений, позволяя задавать более четкое определение стилей.

Что такое медиа-запрос?

Медиа-запрос — это способ контролировать представление контента. Он состоит из типа и минимум одного выражения, которое проверяет выполнение условий для указанных характеристик устройства.

Как уже было сказано, в настоящее время широко реализована поддержка двух типов: « screen » и « print «.

При наличии условных выражений контент может выводиться по-разному для различных типов устройств, без ущерба для содержимого.

Как определить медиа-запрос?

Простой медиа-запрос может быть определен в HTML следующим образом:

В приведенном выше примере, мы указали, что для типа медиа « print » браузер пользователя должен использовать таблицу стилей myexample.css .

То же самое может быть объявлено как @import-правило в CSS:

Когда браузер пользователя обрабатывает приведенный выше медиа-запрос, он определяет, текущий тип медиа — print или нет. Если да, то будет применяться таблица стилей « myexample.css «. Следовательно, вывод медиа-запросов можно организовать в зависимости от выполняемых условий.

Если тип устройств не задан или задано значение ‘ all ‘, то стили будут применяться для всех типов медиа.

В приведенном выше примере, стили будет применяться как для типа ‘ print ‘, так и для типа ‘ screen ‘. Это эквивалентные объявления. Как и следующий CSS-код :

Медиа-запросы могут быть объединены в сложные медиа-запросы:

Этот запрос также может быть объявлен следующим образом:

Медиа-запросы также поддерживают логическое выражение NOT , используя ключевое слово « NOT «:

В приведенном выше примере мы указали, что стили не будут применяться к типу ‘ print ‘, а только к типу ‘ screen ‘.

Характеристики устройств, которые можно указать в медиа-запросах

  • color ;
  • color-index ;
  • device-aspect-ratio ;
  • device-height ;
  • device-width ;
  • grid ;
  • height ;
  • monochrome ;
  • resolution ;
  • scan ;
  • width .

Завершение

Из этой статьи вы узнали о медиа-запросах CSS3. Я надеюсь, что вы нашли эту информацию полезной для себя.

Данная публикация представляет собой перевод статьи « Understanding CSS3 Media Queries » , подготовленной дружной командой проекта Интернет-технологии.ру

Как подключить все медиа запросы через отдельный css файл?

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

  • Вопрос задан 19 мая
  • 351 просмотр

Дмитрий, а зачем вы подключаете style.less и style.css ?
Я думаю стоит определиться — либо ваши стили будут компилироваться в браузере, либо подключаться уже скомпилированные.
Для того что бы работал первый вариант (style.less) я не вижу у вас подключенного компилятора (less.js).

Складывается ощущение, чтобы вы пока вообще не понимаете что делаете :))

Дмитрий, предположение одно — файл некорректно подключен. пути не те, или он отсутствует.

Это должно работать

Вы тут указали что максимальная ширина 840, а в медиа запросах у вас есть 1450 — соответственно этот код и не будет работать.
Это первое, а второе — у вас ошибка в css, собственно после ошибки стили выполнятся не будут все что ниже.
Вы использовали в медиа запросах структуру вложенности что не допустимо для css, это вам не less.
Выполнение стилей дошло вот до этих строк и прекратилось:

Потому собственно код и работает если импортируете его в less, так как он его компилит. А отдельно он не будет работать так как нарушена структура CSS.

CSS: Правило @media

CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.

Синтаксис

Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:

Типы устройств

Тип Описание
all Используется для всех типов устройств.
aural Используется для синтезаторов речи и звука.
braille Используется для тактильной обратной связи устройств Брайля.
embossed Используется для принтеров Брайля.
handheld Используется для небольших или портативных устройств.
print Используется для принтеров
projection Используется для презентаций, таких как слайды.
screen Используется для экранов компьютеров, планшетов, смартфонов и т.д.
speech Используется для речевых браузеров.
tty Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы.
tv Используется для телеэкранов.
Илон Маск рекомендует:  Атрибут manifest в HTML

К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:

Особенности устройств для медиа запросов

Особенность Описание
aspect-ratio Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
color Определяет количество бит на цвет для устройства. Может иметь префикс «min» или «max».
color-index Указывает количество цветов, которое устройство может отображать. Может иметь префикс «min» или «max».
device-aspect-ratio Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
device-height Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
device-width Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
grid Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0.
height Указывает высоту области просмотра, например, окно браузера. Может иметь префикс «min» или «max».
monochrome Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс «min» или «max».
orientation Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина).
resolution Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс «min» или «max».
scan Определяет процесс сканирования телевизионных устройств вывода.
width Указывает ширину области просмотра, например, окно браузера. Может иметь префикс «min» или «max».

Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.

Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:

Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

Логические операторы

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

Media Screen CSS в адаптивной верстке

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

Media-screen примеры

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

Для начала в head нужно добавить такую строчку:

CSS код сейчас такой:

Ставим пред собой задачу на экранах шириной меньше 1000 px изменять цвет текста, фона, покрасить шапку, сместить значок вправо, а слева от него будет появляться надпись. И выглядеть это будет вот так:

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

Более подробно можно посмотреть код демонстрационной страницы и самостоятельно разобраться что к чему.

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

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

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

Использование медиа запросов CSS в адаптивном дизайне в 2020

Дата публикации: 2020-03-02

От автора: в июле 2010 я написала статью на Smashing Magazine «создание мобильной версии сайта с помощью CSS3 медиа запросов». Прошло почти 8 лет, а статья все еще привлекает большой трафик. Я подумала, что было бы неплохо вернуться к этой теме теперь, когда у нас есть такие методы макетирования, как Flexbox и Grid Layout. Статья расскажет про то, как сейчас используются медиа запросы CSS в адаптивном дизайне, а также про то, что будет в будущем.

Нужны ли вообще медиа запросы?

Первое правило использования медиа запросов в 2020 – спросите себя, нужны ли они вам. При создании макетов с помощью обтеканий мы создаем гибкую сетку путем вычисления размера колонок в процентах. Полученные проценты мы используем в методе Ethan Marcotte, который описан в его статье «жидкие сетки» и сформировал основу для техники «адаптивный дизайн». Если нам понадобится изменить размер или пропорции колонок, необходимо добавить брейкпоинт с помощью медиа запроса и переопределить значения. Работая с процентами, у нас нет других вариантов, так как значения в процентах всегда привязаны к контейнеру, расширяется он или сужается.

Flexbox, Grid Layout и макет Multi-column по умолчанию адаптивны. Эти спецификации были написаны, когда уже был адаптивный дизайн и поддержка нескольких устройств. Поэтому в них много общей функциональности, активирующей адаптивный дизайн без лишней возни.

В демо ниже представлены гибкие компоненты Multicol, Flexbox и Grid. Все меняют свой размер и макет под доступное пространство. В примере не используются медиа запросы, всего пара строк CSS.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Можно создавать гибкие компоненты, которые будут по-разному подстраиваться под пространство на экране без медиа запросов, используя встроенную гибкость методов разметки. Например, можно отображать медиа объект в виде колонки, когда пространство ограничено, и как строка, когда пространства достаточно. Сделать это можно парой строк CSS.

flex-basis для флекс элементов – 250 пикселей. Если для двух элементов размером 250 пикселей места не хватает, они отображаются друг под другом. Элементы могут расти (flex-grow – положительное значение), поэтому они будут расти и заполнять строки.

Замечательное свойство Flexbox заключается в том, что компонент ведет себя так в случае, если пространство ограничено размером экрана или компонент помещен в контекст, где у него меньше пространства в контейнере. Медиа запросы не могут решить эту проблему, так как они смотрят на функции всего экрана. Таким образом, новый макет дает нам то, чего не могут медиа запросы.

В демо ниже компонент ограничен вьюпортом (измените размер окна, чтобы оценить гибкость) и контейнером.

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

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

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

Лучшие практики медиа запросов

Как мы видим, медиа запросы не ушли. Но изменился способ их применения. Ниже собраны советы по наилучшему использованию медиа запросов в 2020.

Не определяйте устройства — добавляйте брейкпоинты, когда дизайн должен меняться

Когда мы только начали использовать медиа запросы, устройств было не так много. В действительности, большинство заботились только об iPhone. За пару месяцев устройства и их размеры быстро увеличились. Определять конкретные устройства стало бесполезно. Вместо этого добавляйте брейкпоинты на те размеры, когда дизайн должен меняться. Если начать с дизайна для самого маленького устройства и растягивать окно браузера, в какой момент строки станут слишком длинными для удобного чтения? Когда экран можно использовать лучше? Это и есть та точка, где можно добавить медиа запрос и написать дополнительный CSS.

Таким образом, устройства, попадающие под брейкпоинт получат узкий макет, а все что превосходит брейкпоинт – макет, использующий больше горизонтального пространства на экране. И неважно, iPhone это или Samsumg, или веб-дизайнер, играющийся с окном браузера.

Пиксели используются не везде

При создании брейкпоинтов откажитесь от пикселей. Если строка слишком длинная, это явный индикатор, того, что дизайн должен измениться. Дизайну нужен брейкпоинт. Лучше всего указывать такие точки не в пикселях, а в em единицах. Так вы получите однообразный результат, если текст у пользователя будет больше ожидаемого.

Уделите больше внимания сортировке flex и grid элементов

Преимущество Grid Layout по отношению к Flexbox заключается в возможности изменить порядок элементов в макете на разных брейкпоинатах. Для пользователей мобильных устройств и десктоп пользователей с клавиатурой и мышью это обеспечит отличный UX. Однако некоторых пользователей это может запутать. В частности, это пользователи с плохим зрением, пользующиеся скрин ридером, но которые видят большую часть контента на экране, а также те пользователи, которые перемещаются по сайту с помощью клавиатуры или устройства, отличного от мыши или пальцев.

Такие пользователи прыгают от заголовка к заголовку, от ссылки к ссылке. Их устройства следуют порядку элементов, который задан в разметке, а не порядку отображения на экране. Если меняете порядок контента на разных брейкпоинтах, убедитесь, что по сайту все еще можно перемещаться с помощью клавиатуры.

Не забывайте о вертикальных медиа запросах

Как правило, мы думаем о медиа запросах под ширину устройства, проверяя, достаточно ли нам места для отображения колонок с контентом. Медиа запросы можно также использовать для проверки доступной высоты.

Один из примеров использования вертикальных медиа запросов или медиа запросов по высоте – проверка того, что высоты экрана достаточно для отображения многоколоночного макета без необходимость скролить окно вниз. В CSS коде ниже многоколоночный макет создаст колонки только, если места хватает под 2 колонки размером 15em. Поэтому нам не нужен медиа запрос по ширине. Я добавил медиа запрос min-height, чтобы текст перепрыгивал в колонки только при достижении разумной высоты. Если экран маленький и в альбомном режиме, я покажу только один столбец, и пользователь будет скролить вниз для чтения.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL