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

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

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

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

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

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

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

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

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

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

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

@media only / not media-type and (выражение) {
/ * Код CSS * /
}

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

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

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

@media only screen и (max-width: 450px) {
тело{
цвет фона: синий;
}
}

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

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

/ * дизайн для смартфонов * /
@media (max-width: 450 пикселей) {
тело{
цвет фона: синий;
}
}

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

Внутренний метод включает добавление

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

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

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

/ * дизайн для планшетов * /
@media (max-width: 800 пикселей) {
тело{
цвет фона: красный;
}
}

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

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

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

/ * дизайн для планшетов * /
@media (max-width: 800px) и (min-width: 451) {
тело{
цвет фона: красный;
}
}

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

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

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

 основная таблица стилей 

 таблица стилей планшета 
href = "tablet.css">
 таблица стилей смартфона 

Приведенный выше код следует поместить в

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

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

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

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

Как установить фоновое изображение в CSS

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

Читать далее

Об авторе