🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Что такое респонсивная верстка?
Респонсивная верстка (Responsive Web Design, RWD) — это подход к разработке веб-страниц, при котором сайт автоматически подстраивается под разные размеры экранов и устройства (десктопы, планшеты, смартфоны).
🚩Как реализуется респонсивность?
🟠Медиа-запросы (CSS Media Queries)
Позволяют менять стили в зависимости от размера экрана.
body {
font-size: 16px;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
🟠Гибкие сетки (Flexible Grids, Flexbox, CSS Grid)
Позволяют располагать элементы на странице так, чтобы они адаптировались под экран.
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px; /* Блоки с минимальной шириной 300px */
}
🟠Отзывчивые изображения (Responsive Images)
Изображения должны подстраиваться под размер экрана.
img {
max-width: 100%;
height: auto;
}
🟠Viewport в ``
Обязательный тег для адаптивности на мобильных устройствах.
Ставь 👍 и забирай 📚 Базу знаний