tg-me.com/easy_javascript_ru/1386
Create:
Last Update:
Last Update:
Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).
Использование max-width вместо width
.container {
width: 100%; /* Контейнер занимает всю ширину */
max-width: 1200px; /* Но не больше 1200px */
margin: auto; /* Центрирование */
}Использование Flexbox
.container {
display: flex;
flex-wrap: wrap; /* Перенос элементов, если не влезают */
justify-content: space-between;
}
.item {
width: 48%; /* Два элемента в ряд */
}
@media (max-width: 768px) {
.item {
width: 100%; /* Один элемент в ряд на маленьких экранах */
}
}Использование CSS Grid
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}Изменяют стили в зависимости от ширины экрана.
/* Десктоп (от 1024px) */
body {
font-size: 18px;
}
/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
body {
font-size: 16px;
}
}
/* Телефоны (до 767px) */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
Позволяет загружать разные изображения в зависимости от устройства.
<img
src="image-400.jpg"
srcset="image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Адаптивное изображение">
Управляет масштабированием на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1">
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">Контент</div>
<div class="col-md-6 col-sm-12">Контент</div>
</div>
</div>
Tailwind CSS
<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
<div class="bg-blue-500">1</div>
<div class="bg-green-500">2</div>
<div class="bg-red-500">3</div>
</div>
Ставь 👍 и забирай 📚 Базу знаний