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

Where to write your Media Query CSS?

There are lots of different options for where to write your CSS code.

Examples include:

• Elementor page custom CSS (Elementor pro)
• Elementor global custom CSS (Elementor pro)
• Embed in-page with HTML widget
• WordPress customizer additional CSS
• 3rd-party CSS plugin (Simple CSS, Custom CSS Pro, CSS Hero)
• CSS stylesheet (advanced users)

Global vs. Page-specific CSS

The first choice is whether to put your CSS in a file that will be loaded on every page of your site, or just this single page. Naturally it depends on whether you intend to reuse your media queries for Elementor layouts.

Global CSS: if you want to reuse media query on other pages

• WordPress Customizer
• Elementor global custom CSS file
• 3rd-party CSS plugins

Page-specific CSS:

There are two methods to embed your media queries in a single page (and avoid adding bulk to your site-wide CSS files.

1. Use Elementor’s custom CSS feature
2. Use the HTML Element to embed custom CSS

Custom CSS Plugins

All recent versions of WordPress let you add custom CSS using the ‘Additional CSS’ section of the Customizer. But that’s tied to your active theme, so you may want to use a plugin instead.

Free plugins for custom CSS:

• Simple CSS (by the author of GeneratePress).
• Custom CSS Pro
• WP Add Custom CSS

How to put a Media Query in HTML Widget

You don’t need the Pro version to embed CSS in your Elementor layout. You can use the HTML Widget instead (available in the free version).

Here’s the template:

That’s all you have to do. Sandwich your CSS code as normal in between html <style> tags.

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

Запись медиа-запросов в теле сайта выглядит вот так:

Курс Fullstack Web Development.
Володій навичками розробки як на фронтенді, так і на бекенді. За такими фахівцями черга в компаніях!
Отримати інформацію про курс

Можно добавлять их в HTML-части сайта, внутри таблицы CSS, а также напрямую в код страницы. Если речь идет о старых браузерах, то можно подключить специальную JavaScript-библиотеку, чтобы медиа-запросы функционировали корректно.

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

• все устройства — ;
• устройства с экранами — ;
• синтезаторы речи — ;
• принтеры или страница предварительного просмотра для печати — .

Когда-то раньше также использовались:

• проекторы — ;Курс Frontend.

На курсі ти освоїш стильний дизайн. Стань майстром програмування зовнішнього вигляду сайтів та розкрий свій талант у світі веб-розробки.
Більше про курс

телевизоры — ;
смартфоны и другие мобильные устройства — .

Но в современной версии media queries 4 их принято считать устаревшими.

Также медиа-запросы могут содержать в себе логические операторы, такие как:

• — все условия должны выполняться одновременно;
• — хотя бы одно из условия должно выполняться, аналогично «или»;
• — отрицание условия (имеет более низкий приоритет, чем , а значит будет выполняться после него).

Для составления условий можно использовать некоторые функции:

• ( и ) — определяет требования к ширине браузера, наибольшее и наименьшее значения этого параметра в пикселях или других единицах: ;
• , и — прописывает требования к высоте браузера, аналогично функциям ширины: ;Курс QA.

Стань неперевершеним QA спеціалістом! Стань технічною хрещеною феєю, яка оберігає від помилок і багів. Використай цей шанс!
Дізнатись про курс

определяет количество бит на канал цвета (также есть значения и );
(, ) — отношения ширины к высоте: ;
— оценивает режим отображения страницы: портретный () или альбомный ();

(, ) — это разрешение устройства ввода: требуемое, минимальное и максимальное; измеряется в dpi, dpcm или dppx.

Какие бывают медиа-запросы

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

Приведем в пример фрагмент кода, который иллюстрирует подключение файла для устройств, размер экрана которых меньше 543 пикселей:

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

Медиа-запросы можно реализовывать для Bootstrap 3 и  Bootstrap 4. Например, можно прописать media queries в порядке увеличения размеров для нескольких классов устройств:

@media (min-width: 768px) { /* Стили для устройств с маленьким экраном, размерами 768px - 991px (планшеты и подобные) */ }

@media (min-width: 992px) {  /* Стили для ноутбуков и компьютеров с экранами в диапазоне 992px - 1199px */ }

@media (min-width: 1200px) {  /* Стили для устройств с большой шириной экрана >1200px */ }

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

@media (max-width: 767px) { ... }

@media (min-width: 768px) and (max-width: 991px) { ... }

@media (min-width: 991px) and (max-width: 1199px) { ... }

@media (min-width: 1200px) { ... }

Если же речь идет о медиа-запросах в Bootstrap 4, то можно написать такое постепенное увеличение наименьшей ширины экрана:

@media (min-width: 576px) { /* CSS для экранов размером: 576px – 767px */ }

@media (min-width: 768px) {  /* CSS для: 768px – 991px */ }

@media (min-width: 992px) { /* CSS для: 992px – 1119px */ }

@media (min-width: 1200px) {  /* CSS для экранов больше 1200px */ }

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

@media (max-width: 575px) { ... }

@media (min-width: 576px) and (max-width: 767px) { ... }

@media (min-width: 768px) and (max-width: 991px) { ... }

@media (min-width: 992px) and (max-width: 1199px) { ... }

@media (min-width: 1200px) { ... }

Media Queries for Retina Displays

Over the last few years we’ve started to see a proliferation of devices with displays that have a higher pixel density. It can be useful to style certain aspects of your designs differently for devices with these higher pixel densities. A good example would be providing high-resolution version of certain graphics.

We can accomplish this using the min-resolution media feature with a value of 192dpi. However, the resolution feature is not necessarily supported across all browsers and for a more foolproof approach we can also add an additional non-standard -webkit-min-device-pixel-ratio feature with a value of 2:

You can track the current browser support for the resolution media feature .

Выбор точек прерывания от маленького до большого экрана

Предыдущий раздел был посвящён разработчикам, предпочитающим использовать подход, ориентированный на desktop-first. В этом разделе речь пойдёт о разработчиках, предпочитающих использовать подход mobile-first и в конечном итоге масштабируют свои сайты, чтобы они идеально помещались на экране настольного компьютера.

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

Исходя из текущей статистики разрешений экранов от statcounter, это значительные точки прерывания, которые вы должны использовать в своём следующем проекте веб-разработки, если вы планируете развивать mobile-first;

• Экран мини-планшета ()
• Экран планшета ()
• Экран настольного компьютера ()

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

Common media features for CSS media queries

Now we get to the meat of this guide on how to use CSS media queries — the different media features you can incorporate. These target devices that have specific characteristics as indicated by the chosen media features.

Media features improve on the use of media types, allowing you to use a more fine-grained approach to applying your styles in certain circumstances. In this section and the following sections, I’ll describe what each one targets, along with some example code to show each of the possible values or types of values.

This section looks at the most commonly used and best supported media features:

: Width of the viewport including width of scrollbar. Also allows use of the and prefixes.

: The height of the viewport. Accepts and prefixes.

: Orientation of the viewport.

: The display mode of the application, as specified in the web app manifest.

: Based on the specified aspect ratio, indicated by two positive integers separted by a slash.

: Number of bits per color component of the output device, or zero if the device doesn’t use color. Also allows use of and prefixes. No value indicates you’re targeting any color device.

: Detect if the device uses either a grid-based screen (e.g. a text-based terminal) or bitmap-based screen (like most modern computers, tablets, and smartphones). A value of means grid-based, a value of means bitmap-based.

: Bits per pixel in the device’s monochrome frame buffer.

: The pixel density of the output device. Can also use the and prefixes.

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

Для начала разберём очень простой пример – ниже представлен макет с двумя колонками.

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

Первый способ использовать медиа-запросы – это просто написать альтернативную секцию с правилами CSS в вашей таблице стилей. Итак, для определения маленьких экранов, мы используем следующий синтаксис:

@media only screen and (max-device-width: 480px) {
 
}

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

@media only screen and (max-device-width: 480px) {
div#wrapper {
    width: 400px;
}
div#header {
    background-image: url(media-queries-phone.jpg);
    height: 93px;
    position: relative;
}
div#header h1 {
    font-size: 140%;
}
#content {
    float: none;
    width: 100%;
}
#navigation {
    float:none;
    width: auto;
}
}

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

Типичные устройства точка прерывания

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

Пример

/* Очень маленькие устройства (телефоны, 600px и ниже) */
@media only screen and (max-width: 600px) {…}
/* Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше)
*/@media only screen and (min-width: 600px) {…}
/* Средние устройства (альбомные планшеты, 768px и выше) */
@media only screen and (min-width: 768px) {…}
/* Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) */
@media only screen and (min-width: 992px) {…}
/* Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px) {…}

JavaScript

Working with Media Queries

The Foundation JavaScript includes a set of helper functions for working with media queries. They’re all on the object.

The MediaQuery utility uses the Sass breakpoint settings and requires the Foundation CSS to be imported. For Sass users, you need to include either `foundation-everything()` or `foundation-global-styles()`.

Get the name of the current breakpoint with .

You can use to check the breakpoint the screen is at.

You can also use the (default), and modifiers like in Sass, or use the equivalent , and .

To get the media query of a breakpoint, use .

Watching for Breakpoint Changes

The media query helper broadcasts an event on the window every time the breakpoint changes. We use this internally with plugins like Interchange to detect a shift in breakpoint. You can also subscribe to the event yourself.

Модернизация существующего сайта

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

Макет для экрана монитора

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

Подключаем новую таблицу стилей

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

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />

Для создания новой таблицы стилей, мы делаем копию основной и называем её small-device.css. Мы перезапишем некоторые правила, а всё лишнее удалим.

Сокращаем размер шапки

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

body {
    background-image: url(/img/small-bg.png);
}
#wrapper {
    width: auto;
    margin: auto;
    text-align: left;
    background-image: url(/img/small-logo.png);
    background-position: left 5px;
    background-repeat: no-repeat;
    min-height: 400px;
}

Изменяем макет

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

.article #aside {
    float: none;
    width: auto;
}

Прибираемся

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

Тестируем на Iphone

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

<meta name="viewport" content="width=device-width" />

Вот теперь сайт отображается как надо!

Это был очень простой пример, который показал, как легко адаптировать сайт под мобильные устройства.

Что такое viewport? 🧐

Viewport — это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″.
А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

Назначение метатега viewport

meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi).

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

1<metaname="viewport"content="width=device-width, initial-scale=1">

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

• width=device-width
• initial-scale=1

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

• minimal-scale — задаёт минимальный масштаб;
• maximal-scale — устанавливает максимальный масштаб;
• user-scalable — указывает, может ли пользователь управлять масштабом или нет.

Пример:

1

2<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3

4

5<metaname="viewport"content="width=device-width, user-scalable=yes">

6

7

8

9<metaname="viewport"content="width=1024">

Пример использования

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

Для просмотра страниц пользователями мы установим следующие CSS стили:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */
}

Окончательный файл CSS будет выглядеть следующим образом:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */
}

Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important, которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important. Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):

Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ 
	h2, p {color: #000 !important;} /* групповой селектор устанавливает цвет элементов - черный */
	body {background-color: #FFF !important; } /* устанавливаем цвет заднего фона - белый */
}

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Теперь свяжем наш файл CSS (css_pr_media.css) с документом, используя элемент <link>:

<link rel = "stylesheet" href = "../css_pr_media.css">

HTML разметка примера:

<!DOCTYPE html>
<html>
<head>
        <title>Пример использования CSS правила @media</title>
        <link rel = "stylesheet" href = "../css_pr_media.css">
</head>
<body>
	<h2>Рапаны</h2>
	<p><b>Рапаны (лат. Rapana)</b> — род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):

Пример использования CSS правила @media (изменение CSS стилей при печати страниц).CSS правила

Logical operators

When writing media queries, you can use four different logical operators:

(comma), , , .

The operator is a deprecated feature that was used to hide styles from older browsers that only supported CSS2 features. As such, it will not be discussed past this statement.

and

This operator is used to combine multiple conditions. In this case, their logic will be executed when each of them is true.

For example, the following query will only apply if all three conditions are met (its screen, width >= 1280px, and landscape orientation):

, (comma)

This operator defines the use of styles when only one of the specified conditions must be met.

In this example, styles will be applied to the page in two cases: 

when width >= 524px or orientation is portrait.

not

The operator is used for negation.

When using with  negation, it works for the entire media query. In this case, when specifying  — it is not necessary to specify the device type.

For example, apply styles only when not (screen and width >= 418px and height >= 724px).

When using in a comma expression, it adds a negation for that part only.

For example, apply styles when the following condition is true:

not a screen or not width >= 418px.

Basic Media Queries

Media queries are defined using the @media at-rule followed by a media type, 0 or more media features or both a media type and media feature(s). The available media types are all, print, screen and speech, and when not specified the type of all is implied. Multiple media types can be used at once and they should be separated by commas:

Media types such as tv or projection have been deprecated with Media Queries level 4.

As for media features, they are defined in parentheses and a vast array of features can be tested. Some of the most popular features are width, height, aspect-ratio, orientation and resolution. Many of these popular features are range features so they also have a min and max version available (eg.: min-width, max-width, min-aspect-ratio, max-aspect-ratio,…)

In the following simple example, the default background color is hotpink, but screen devices with a viewport width that’s 650px or less will have a background color of rebeccapurple instead:

Notice how, when specifying both a media type and a media feature, we need to use the and logical operator between them.

Here are a few more examples of simple media queries that specify either a media type, a media feature or both:

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

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

@media not screen and (hover: hover) {
  /* ... */
}

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

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

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

@media only all and (min-width: 320px) and (max-width: 480px) {
  /* ignored by older browsers */
}

Примечание: Как и в случае с оператором not, при использовании only тип носителя является обязательным

Обратите внимание, что устаревшие браузеры, которые не поддерживают Media Queries level 3, сейчас встречаются редко, поэтому в большинстве случаев only можно не использовать

What is SCSS?

We’ll Use SCSS, not CSS. But….. what is SCSS?

SCSS is a pre-processor of CSS which is more powerful than regular CSS. Using SCSS we can ->

1. Nest our selectors like a branch of a tree and better manage our code.
2. Store various values into variables
3. Use Mixins to stop code repetition and save time

And much more!

In our SCSS, we’ll remove our default browser settings, and we’ll change box-sizing, font-size, and font-family like this:

Don’t forget to set the height of the .container class. Otherwise we’ll fail to achieve our desired results:

Remember the additional id we wrote in HTML? We’ll style it and position it in our browser here:

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

Сначала предлагаю разобрать структуру медиа-запроса:

@media – объявление правилаnot – оператор отрицания, используется для отрицании всего последующего выраженияonly – оператор позволяет скрыть медиа-запросы от браузеров, которые их не поддерживаютtype – тип устройстваlogical – логический оператор (и или или) позволяет лучше управлять логикой медиа-запросаexpression – выражение проверяющее характеристики устройства

Отмечу, что я не планирую писать исчерпывающее руководство по media-queries, поэтому остановлюсь на тех моментах, которые позволяют делать адаптивные сайты.

Elementor Media Query Examples:

Here are some examples, showing common ways you might use a Media Query to adjust your layout across multiple screen sizes.

Examples:

1. Hide an image on smaller screens
2. Prevent squished columns on small screens
3. Resize text based on screen size

Tip: Add a custom class name to your Elementor widget, making it easier to target the right element with your Media Query. I’ll be adding using the .yourclass class name in these examples.

2. Full-width columns on small screen

We need to target both the flexbox properties of the Elementor Row, as well as the width of the columns. You’ll want to add your classname to the Elementor inner-section containing the columns.

3. Responsive font-size

It’s possible to set your font-size relative to the width of the viewers browser, scaling it in 1 pixel increments without having to set individual breakpoints.

But we still want to use a media query to effectively set min/max values for the font sizing.

In this example: This was adapted from Chris Coyier’s demo at CSS Tricks.

This will scale your body font on any Elementor page ranging from 16px to 20px depending on the width of the visitor’s browser.

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

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

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

Пример 1: Адаптация текста и макета

Один из наиболее часто используемых медиа-запросов – изменение размеров текста в зависимости от ширины экрана. На устройствах с более узкими экранами текст может быть масштабирован, чтобы обеспечить лучшую читаемость. Рассмотрим пример:

CSS

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

Пример 2: Адаптация изображений

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

CSS

В этом примере мы использовали медиа-запросы для замены фонового изображения для элемента с классом . На устройствах с шириной экрана до 768 пикселей будет использоваться изображение “header-small.jpg”, а на устройствах с шириной экрана 769 пикселей и более – изображение “header-large.jpg”.

Каскадирование и порядок медиа-запросов

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

CSS

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

Альтернативы медиа-запросам

Это не означает, что разработчики никогда не должны использовать медиа-запросы, но лучшая практика требует, чтобы вы использовали как можно меньше медиа-запросов в своём проекте.

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

Это свойство автоматически делает ваши макеты отзывчивыми, когда размер экрана перестаёт устраивать.

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

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

Заключение

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

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

Просмотров: 68