Как создать адаптивный макет сайта

Пройдите тест, узнайте какой профессии подходите

Содержание

Вконтакте

Одноклассники

Скопировать ссылку

«Как создать адаптивный макет сайта»: освойте основы адаптивного дизайна с отзывчивой сеткой, медиа-запросами и флексибельными изображениями

Алексей Кодов

Автор статьи

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

Принципы адаптивного дизайна

1. Отзывчивая сетка

Отзывчивая сетка – это основа адаптивного дизайна. Она позволяет размещать элементы на странице таким образом, чтобы они автоматически подстраивались под разные размеры экрана.

Пример кода с использованием CSS Grid:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

2. Медиа-запросы

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

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

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

3. Флексибельные изображения и медиаконтент

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

Пример кода для адаптивных изображений:

img {
  max-width: 100%;
  height: auto;
}

Практический пример

Давайте создадим простой адаптивный макет сайта с использованием всех вышеуказанных принципов.

HTML-код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Адаптивный макет</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

CSS-код (styles.css):

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

img {
  max-width: 100%;
  height: auto;
}

Теперь у вас есть базовое представление о том, как создать адаптивный макет сайта. Эти принципы и примеры помогут вам в дальнейшем изучении веб-разработки и создании отзывчивых сайтов. Удачи! 😉