Адаптивная вёрстка
Mobile-first подход на практике
Mobile-first — не тренд, а необходимость. 60% трафика приходится на мобильные устройства.
Принцип mobile-first:
Сначала стили для мобильных, потом усложнение для десктопа.
/* Базовые стили (мобильные) */
.container {
padding: 15px;
width: 100%;
}
/* Планшеты */
@media (min-width: 768px) {
.container {
padding: 30px;
max-width: 720px;
}
}
/* Десктоп */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
Breakpoints (контрольные точки):
- 320px — маленькие телефоны
- 768px — планшеты
- 1024px — небольшие десктопы
- 1200px — большие экраны
Гибкие изображения:
img {
max-width: 100%;
height: auto;
}
max-width: 100%;
height: auto;
}
Гибкая типографика:
html {
font-size: 16px;
}
@media (min-width: 768px) {
html {
font-size: 18px;
}
}
Практика:
Возьмите существующий проект и перепишите CSS с mobile-first подходом.
Инструменты:
Chrome DevTools (F12 → иконка устройства) для тестирования.
