Карта сайта

Урок 21: Адаптивная верстка в HTML и CSS

/Уроки по HTML/CSS/Урок 21: Адаптивная верстка в HTML и CSS
Урок 21: Адаптивная верстка в HTML и CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

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

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

Что такое адаптивная верстка?

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

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

Медиа-запросы (@media)

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

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

Медиа-запросы пишутся с помощью правила @media. Вот базовый синтаксис:

@media условие {
  /* Стили, которые применяются, если условие выполняется */
}

Например, если мы хотим изменить цвет фона на красный, когда ширина экрана меньше 600 пикселей, мы можем написать:

@media (max-width: 600px) {
  body {
    background-color: red;
  }
}

Основные условия в медиа-запросах

  • max-width: Применяет стили, если ширина экрана меньше или равна указанному значению.
  • min-width: Применяет стили, если ширина экрана больше или равна указанному значению.
  • orientation: Позволяет применять стили в зависимости от ориентации устройства (portrait — портретная, landscape — альбомная).
  • max-height и min-height: Аналогично max-width и min-width, но для высоты экрана.

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

Давайте создадим простой пример. У нас есть блок с текстом, который должен менять цвет фона и размер шрифта в зависимости от ширины экрана.

<div class="container">
  <p>Этот текст адаптируется под размер экрана!</p>
</div>
.container {
  padding: 20px;
  background-color: lightblue;
  font-size: 16px;
}

@media (max-width: 768px) {
  .container {
    background-color: lightgreen;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .container {
    background-color: lightcoral;
    font-size: 12px;
  }
}

В этом примере:

  • На экранах шире 768 пикселей фон будет светло-голубым, а размер шрифта — 16px.
  • На экранах уже 768 пикселей фон станет светло-зеленым, а размер шрифта уменьшится до 14px.
  • На экранах уже 480 пикселей фон станет светло-коралловым, а размер шрифта — 12px.

Относительные единицы измерения

В адаптивной верстке важно использовать относительные единицы измерения, чтобы элементы страницы могли гибко подстраиваться под размеры экрана. Давайте рассмотрим три основные единицы: проценты (%), em и rem.

Проценты (%)

Проценты позволяют задавать размеры элементов относительно их родительского контейнера. Например, если вы задаете ширину блока в 50%, он будет занимать половину ширины своего родителя.

.container {
  width: 80%; /* Ширина контейнера будет 80% от ширины родителя */
}

Единица em

Единица em задает размер относительно текущего размера шрифта. Если вы задаете font-size: 2em, это означает, что размер шрифта будет в два раза больше, чем у родительского элемента.

.text {
  font-size: 1.5em; /* Размер шрифта будет в 1.5 раза больше, чем у родителя */
}

Единица rem

Единица rem (root em) задает размер относительно размера шрифта корневого элемента (<html>). Это делает rem более предсказуемым, чем em, так как он не зависит от вложенности элементов.

.text {
  font-size: 1.2rem; /* Размер шрифта будет в 1.2 раза больше, чем у корневого элемента */
}

Пример использования относительных единиц

Давайте создадим пример, где мы используем проценты для ширины и rem для размеров шрифта.

<div class="container">
  <p>Этот текст адаптируется под размер экрана!</p>
</div>
html {
  font-size: 16px; /* Задаем базовый размер шрифта */
}

.container {
  width: 90%; /* Ширина контейнера будет 90% от ширины родителя */
  padding: 1rem; /* Отступы будут 16px (1rem) */
  font-size: 1rem; /* Размер шрифта будет 16px */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Уменьшаем базовый размер шрифта */
  }
}

В этом примере:

  • На экранах шире 768 пикселей размер шрифта будет 16px.
  • На экранах уже 768 пикселей размер шрифта уменьшится до 14px, а все элементы, использующие rem, автоматически подстроятся под новый размер.

Практические задачи

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

Задача 1: Создайте адаптивное меню

Создайте меню, которое будет отображаться горизонтально на больших экранах и вертикально на маленьких.

<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
</nav>
.menu {
  display: flex;
  justify-content: space-around;
  background-color: lightblue;
  padding: 1rem;
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    align-items: center;
  }
}

Задача 2: Адаптивные изображения

Создайте блок с изображением, которое будет занимать 100% ширины на маленьких экранах и 50% на больших.

<div class="image-container">
  <img src="image.jpg" alt="Пример изображения">
</div>
.image-container img {
  width: 100%;
}

@media (min-width: 768px) {
  .image-container img {
    width: 50%;
  }
}

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

Если вы хотите изучить HTML и CSS более глубоко, рекомендую ознакомиться с полным курсом «HTML/CSS для начинающих». Там вы найдете все уроки, дополнительные материалы и практические задания.

Надеюсь, этот урок был полезен для вас.