Как использовать медиа-запросы в HTML и CSS для создания адаптивных сайтов

Дядя Влад

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

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

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

Понимание адаптивного дизайна

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

  • Использование единиц rem и em вместо пикселей (px)
  • Установка области просмотра / масштаба каждой веб-страницы
  • Использование медиа-запросов

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

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

Подробнее: Шпаргалка по основным свойствам CSS3

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

Использование медиа-запросов

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

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

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

 
@media only/not media-type and (expression){
 /*CSS code*/
 }

Общая структура медиа-запроса включает:

  • Ключевое слово @media
  • Ключевое слово not / only
  • Тип носителя (который может быть экранным, печатным или речевым)
  • Ключевое слово «и»
  • Уникальное выражение в круглых скобках
  • Код CSS заключен в пару открытых и закрытых фигурных скобок.

Связанный: Использование CSS для форматирования документов для печати

Пример медиа-запроса с единственным ключевым словом

 
@media only screen and (max-width: 450px){
 body{
 background-color: blue;
 }
 }

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

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

Пример медиа-запроса по умолчанию

 
/*design for smartphones*/
 @media(max-width: 450px){
 body{
 background-color: blue;
 }
 }

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

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

Внутренний метод включает добавление тега <style> к тегу <head> файла HTML и создание медиа-запроса в параметрах тега <style>.

Внешний метод включает создание медиа-запроса во внешнем файле CSS и его привязку к вашему HTML-файлу с помощью тега <link>.

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

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

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

Пример запроса на планшетный компьютер

 
/* design for tablets */
 @media(max-width: 800px){
 body{
 background-color: red;
 }
 }

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

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

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

Запрос на планшетный компьютер с примером диапазона


 /* design for tablets */
 @media(max-width: 800px) and (min-width:451){
 body{
 background-color: red;
 }
 }

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

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

Тег <link> – это HTML-элемент, который используется для импорта стилей CSS из внешней таблицы стилей. Этот тег имеет медиа-свойство, которое работает так же, как медиа-запрос в CSS.

 <!-- main stylesheet -->
 <link rel="stylesheet" href="main.css">
 <!-- tablet stylesheet -->
 <link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
 href="tablet.css">
 <!-- smartphone stylesheet -->
 <link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">

Приведенный выше код следует поместить в тег <head> вашего HTML-файла. Теперь все, что вам нужно сделать, это создать три отдельных файла CSS с именами main.css, tablet.css и smartphone.css, а затем создать конкретный дизайн, который вам нужен для каждого устройства.

Стиль в основном файле будет применяться ко всем экранам шириной более 800 пикселей, стиль в файле планшета будет применяться ко всем экранам с шириной от 450 до 801 пикселей, а стиль в файле смартфона будет применяться ко всем экранам ниже. 451px.

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

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

Кредит изображения: негативное пространство / Pexels