Статья также доступна на украинском (перейти к просмотру).

Оглавление:

• Когда целесообразно их применение
• Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS
• Как записать медиа запрос в общем CSS файле
• Рассмотрим синтаксис написания медиа запросов
• Примеры написания медиа запросов
• Выводы

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

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

Также необходимо соблюдать нормы по Core Web Vitals.

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

Медиа запросы (media queries) – это правила CSS позволяющие управлять стилями элементов в зависимости от значений технических параметров (высота и ширина браузера, разрешение страницы, типа устройства, его ориентации, плотности пикселей и т.д.). Впервые начали применяться в CSS 3.

Когда целесообразно их применение

Страница сверстана в несколько колонок

Трех колоночный дизайн достаточно часто встречается в HTML верстке.

Однако, если на широком мониторе, компа или ноутбука, он будет смотреться отлично, со смартфона это будет очень неудобно и некрасиво.

Необходимо “конвертировать” эти три колонки в одну.

Различная величина шрифтов

Если на стационарных компьютерах заголовки и подзаголовки в 60 px буду смотреться хорошо, то на экранах смартфонов они могут просто не помещаться на экране. 

Необходимо задать отдельные стили для мобильных устройств.

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

Различные отступы между блоками и полями

Требования по margin и padding для мобильных, компьютеров и планшетов разные. 

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

Также страница не будет оптимизирована под использование с мобильных устройств.

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

Избежание горизонтальной прокрутки

Если Вы укажите фиксированную ширину блока, например width=960px, то на широкоугольном мониторе страница будет выглядеть красиво и удобно. А вот на смартфонах и других мониторах возникнет горизонтальная прокрутка. Поэтому для каждого типа устройства следует указывать свою ширину.

Или воспользуйтесь свойствами CSS max-width, min-width.

Удобство навигации

Панель управления и меню сайтов десктопных компьютеров и смартфонов - это разные вещи. Поэтому навигация для компьютеров и смартфонов должны реализовываться по-разному.

Ненужные элементы для мобильной верстки

Некоторые элементы, которые используются для десктопнной версии сайта, в мобильной версии практически не используются и не нужны. Применяйте свойство display:none при применении медиа запросов CSS и Вы уберете ненужные для мобильной версии блоки.

Разрешение экрана в наше время колеблется от 320 px для смартфонов до 2560 px для широкоугольных мониторов.

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

Оба способа равнозначны.

Подключение медиа запроса через <link> в шапке сайта со стилями, которые прописаны в отдельном файле CSS

На картинке ниже показан пример подключения медиа запросов, находящиеся в отдельном, собственном CSS файле.

Его можно подключить через <link rel="styleet".

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

href="/assets/mobile.css - указываем путь к файлу CSS со стилями для данного медиа запроса;

Так стили следует записывать, если они разнесены в разные CSS файлы.

Ключевое слово  “@media...” с условиями по нему писать не нужно. 

Как записать медиа запрос в общем CSS файле

Если же все стили записаны в одном файле, то медиа запрос необходимо записать после всех стилей CSS,  потому что в противном случае они будут переписывать его.

Не забудьте про ключевое слов “@media” и условия по нему.

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

Типы устройств, для которых указано это правило:

• screen - тип устройства, на котором будет применяться это правило. В данном случае это дисплей (экран);

• print - принтер или режим предварительного просмотра страницы перед печатью;

• all - все типы устройств;

• speech - гаджеты, которые читают контент с экрана (скринридеры).

Условия медиа запросов разделяются основными логическими операторами:

• and - требуется выполнения всех указанных условий;

• запятая “,” - требуется выполнения одного из указанных условий;

• not - отрицание указанного условия. Т.е. если указанное условие не выполняется.

В круглых скобках указываются медиа функции. Это простые функции, которые воспринимаются как правило.

Для указания размеров существует 7 основных значений:

• min-width;

• max-width;

• width;

• min-height;

• max-height.

• height.

Для указания ориентации мобильного устройства:

• orientation

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

Самые распространенные значения -  это min-width, max-width, когда нужно применить стили под определенное разрешение экрана смартфона.

Примеры написания медиа запросов

Рассмотрим подробнее в примерах медиа функции, которые задаются под определенные условия по ширине браузера, дисплея.

Для удобства их можно копировать прямо в CSS стили вместе с комментариями.

@media screen and (max-widht:1080px) 
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

/*Данное правило предназначено для дисплеев/браузеров с шириной не более 1080 px. Если ширина экрана будет более 1080 px, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (max-width: 1920px)
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

/*Данное правило предназначено для дисплеев/браузеров с шириной более 1920 px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (min-width: 1080px) and (max-width: 1920px) 

{ .container { margin: 48px; line-height: 29px; font-size:16px; } }

/*Данное правило предназначено для дисплеев/браузеров с шириной более 1080px и менее 1920px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (min-height: 720px)
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

/*Данное правило предназначено для дисплеев/браузеров с высотой 720 px. Если высота экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (orientation: landscape) {
body {
flex-direction: row;
}

/* При альбомном (горизонтальном) отображении сайта его блоки будут отображаться в строку */

}
@media (orientation: portrait) {
;body {
flex-direction: column;
}
}

/* При портретном (вертикальном) отображении сайта его блоки будут отображаться вертикально */

Медиа запросы чаще всего следует применять, если при проверке возникают следующие проблемы:

• Шрифт слишком мелкий;

• Блоки расположены слишком близко;

• Появляется горизонтальная прокрутка.

Выводы

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

Из написанного выше можно сделать следующие выводы по медиа выражениям:

• Запрос состоит из ключевого слова @media, одного или нескольких условий с логическими операторами для их комбинирования и CSS стилей, которые необходимо применить, в случае выполнения условий; 

• Самые распространенные условия - это min-width, max-width;

• Выражения в общих CSS файлах необходимо записывать после всех стилей;

• Выражения с большим объемом CSS стилей записывайте в отдельный файл, с привязкой ссылки на него в основном HTML документе. При этом ключевое слово @media с фигурными скобками к нему в этом отдельном файле писать не нужно, только CSS стили;

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

При написании этой статьи использовались материалы от: Александра Мальцева, видео блогов Web Developer Blog, WebDev.

Подписывайтесь на наш телеграмм - канал t.me/freehostua, чтобы быть в курсе новых полезных материалов. Смотрите наш Youtube канал на youtube.com/freehostua.

Дата: 02.12.2021 Автор: Яременко Владислав под редакцией Евгения Шермана #css

Голосование 1 2 3 4 5