Адаптивный веб-дизайн HTML
Адаптивный веб-дизайн (responsive web design) — это создание страниц, которые хорошо выглядят на всех устройствах. Адаптивная страница автоматически подстраивается под разные размеры экрана и viewport.
Что такое адаптивный веб-дизайн?
Адаптивный веб-дизайн использует HTML и CSS для автоматического изменения размера, скрытия, уменьшения или увеличения сайта, чтобы он хорошо выглядел на всех устройствах — от настольных компьютеров до планшетов и телефонов.
Настройка Viewport
Чтобы сделать сайт адаптивным, добавьте мета-тег viewport на каждую страницу. Он сообщает браузеру, как управлять размером и масштабированием страницы.
Пример
Страница, включающая мета-тег viewport.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Адаптивный веб-дизайн</h1>
<p>Эта страница включает мета-тег viewport, поэтому она правильно масштабируется на всех устройствах.</p>
</body>
</html>
Адаптивные изображения
Адаптивные изображения хорошо масштабируются под любой размер браузера. Если CSS-свойство width установлено в 100%, изображение масштабируется вверх и вниз, но может стать больше своего исходного размера. Использование max-width в 100% вместо этого позволяет изображению уменьшаться, но никогда не превышать исходный размер.
Использование width
Изображение с width, установленным в 100%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Img Ширина</title>
</head>
<body>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>
Использование max-width
Изображение с max-width, установленным в 100%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Img Максимальная Ширина</title>
</head>
<body>
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Показ разных изображений в зависимости от ширины браузера
Элемент <picture> позволяет показывать разные изображения для разных размеров окна браузера.
Пример
Разные изображения цветов при разной ширине.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивное изображение</title>
</head>
<body>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Цветы">
</picture>
</body>
</html>
Адаптивный размер текста
Размер текста можно задать в единицах vw, что означает ширину viewport, поэтому текст следует за размером окна браузера. 1vw — это 1% от ширины viewport, поэтому если viewport шириной 50 см, то 1vw равен 0,5 см.
Пример
Заголовок, размер которого задан в единицах ширины viewport.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивный текст</title>
</head>
<body>
<h1 style="font-size:10vw">Привет, мир</h1>
</body>
</html>
Медиазапросы
Помимо изменения размера текста и изображений, адаптивные страницы часто используют медиазапросы. С помощью медиазапроса можно определить совершенно разные стили для разных размеров браузера, например показ колонок рядом друг с другом на больших экранах и их сложение друг под другом на маленьких.
Пример
Колонки, складывающиеся друг под другом на экранах 800px или меньше.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left, .right {
float: left;
width: 20%; /* По умолчанию ширина 20% */
}
.main {
float: left;
width: 60%; /* По умолчанию ширина 60% */
}
/* Используем медиазапрос, чтобы добавить точку перелома при 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* Ширина 100%, когда область просмотра 800px или меньше */
}
}
</style>
</head>
<body>
<div class="left">
<p>Левое меню</p>
</div>
<div class="main">
<p>Основной контент</p>
</div>
<div class="right">
<p>Правый контент</p>
</div>
</body>
</html>
Адаптивная веб-страница - полный пример
Адаптивная веб-страница должна хорошо выглядеть как на больших экранах настольных компьютеров, так и на маленьких мобильных телефонах.
Адаптивный веб-дизайн - фреймворки
Все популярные CSS-фреймворки предлагают адаптивный дизайн. Они бесплатны и просты в использовании.
Bootstrap
Bootstrap — ещё один популярный CSS-фреймворк для адаптивного дизайна.
Пример
Адаптивная страница, созданная с помощью Bootstrap 5.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<title>Пример Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Моя первая страница на Bootstrap</h1>
<p>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Колонка 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-4">
<h3>Колонка 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-4">
<h3>Колонка 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>