Сайт должен хорошо выглядеть и на большом мониторе, и на телефоне. Для этого есть медиазапросы.
Проверить адаптивность можно в DevTools: F12 → значок телефона (Ctrl + Shift + M). А здесь — нажми ⤢ над редактором и меняй ширину окна.
Создай сайт, как на анимации: при уменьшении экрана блоки перестраиваются. Смотреть видео.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Создай второй сайт, как на анимации. Смотреть видео.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Три карточки стоят в ряд (display: flex у .cards). Добавь медиазапрос: если ширина экрана меньше 600px — @media (max-width: 600px) — карточки должны встать столбиком (flex-direction: column).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
body { margin: 0; font-family: sans-serif; }
.card { flex: 1; font-size: 80px; text-align: center; padding: 30px; margin: 10px; background-color: #efeaff; border-radius: 16px; }
.cards { display: flex; }
@media (max-width: 600px) {
.cards { flex-direction: column; }
}
</style>
</head>
<body>
<div class="cards">
<div class="card">🐶</div>
<div class="card">🐱</div>
<div class="card">🐰</div>
</div>
</body>
</html>
Большая картинка вылезает за край экрана на телефоне. Исправь: у картинки должно быть max-width: 100%, а в <head> добавь тег <meta name="viewport" content="width=device-width, initial-scale=1.0">.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя страница</title>
<style>
body { font-family: sans-serif; }
img { max-width: 100%; }
</style>
</head>
<body>
<h1>Моё путешествие</h1>
<img src="img/night.jpg" alt="Ночное небо">
</body>
</html>
На экранах уже 768px меню .menu должно прятаться (display: none), а вместо него показываться кнопка-бургер .burger (на широком экране она спрятана).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
header { display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: #eee; }
.burger { display: none; font-size: 24px; }
@media (max-width: 768px) {
.menu { display: none; }
.burger { display: block; }
}
</style>
</head>
<body>
<header>
<b>Логотип</b>
<nav class="menu"><a href="#">Главная</a> <a href="#">О нас</a> <a href="#">Контакты</a></nav>
<button class="burger">☰</button>
</header>
</body>
</html>