Mobile First — это подход, где ты сначала проектируешь мобильную версию, а потом постепенно расширяешь интерфейс под большие экраны. Такой порядок уменьшает хаос в стилях.
Шаг 1. Пишем базовые стили для телефона
По умолчанию задаем одноколоночный layout и комфортные отступы.
:root {
--content-width: 100%;
}
.page {
max-width: var(--content-width);
margin: 0 auto;
padding: 16px;
}
.hero-title {
font-size: 28px;
line-height: 1.2;
}Шаг 2. Добавляем сетку карточек для мобильного
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}Шаг 3. Расширяемся на планшет
Когда экран становится шире, добавляем второй столбец и увеличиваем внутренние отступы.
@media (min-width: 768px) {
:root {
--content-width: 720px;
}
.page {
padding: 24px;
}
.cards {
grid-template-columns: repeat(2, 1fr);
}
}Шаг 4. Десктопный слой
@media (min-width: 1024px) {
:root {
--content-width: 980px;
}
.hero-title {
font-size: 42px;
}
.cards {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}Шаг 5. Минимальный HTML-каркас страницы
<main class="page">
<h1 class="hero-title">HTML/CSS для новичков</h1>
<section class="cards">
<article class="card">Карточка 1</article>
<article class="card">Карточка 2</article>
<article class="card">Карточка 3</article>
</section>
</main>Частые ошибки
- Начинают с десктопа, а мобильный "дожимают" в конце.
- Слишком много брейкпоинтов без реальной необходимости.
- Фиксированные ширины вместо гибких значений.
- Нет проверки на реальном телефоне.
Мини-чеклист
- База работает на 360px без горизонтального скролла.
- Брейкпоинты добавлены только там, где реально ломается интерфейс.
- Типографика масштабируется постепенно.
- Карточки и сетки перестраиваются предсказуемо.
Этот подход дает чистый CSS и избавляет от борьбы с «лесом» переопределений.
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →