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

Как использовать медиа-запросы в 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 пикселей и меньше, то есть в основном к смартфонам. Единственное ключевое слово можно заменить ключевым словом not, и тогда стили CSS в медиа-запросе выше будут применяться только к печати и речи.

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

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


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

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

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

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

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

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

Независимо от того, используются ли медиа-запросы через внутренний или внешний 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, вы можете использовать альтернативный метод. Этот метод включает использование медиа-запросов в теге 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.

Читать далее Похожие темы
  • Программирование
  • Веб-разработка
  • Веб-дизайн
  • CSS
Об авторе Кадейша Кин(Опубликовано 21 статья)

Кадейша Кин (Kadeisha Kean) - разработчик программного обеспечения полного стека и автор статей по техническим / технологическим вопросам. У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производство материала, понятного любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).

Ещё от Kadeisha Kean

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

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

Нажмите здесь, чтобы подписаться