0Pricing
CSS Academy · Урок

Подход Mobile-First и Desktop-First

Разберитесь в различиях между стратегиями проектирования Mobile-First и Desktop-First.

«Подход Mobile-First и Desktop-First» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое адаптивный дизайн

Адаптивный веб-дизайн создаёт макеты, которые подстраиваются под любой размер экрана — от небольших смартфонов до больших настольных мониторов — с помощью гибких сеток, адаптивных изображений и медиазапросов CSS.

Подход «сначала мобильные устройства»

В подходе «сначала мобильные устройства» сначала пишут базовый CSS для маленьких экранов, а затем с помощью медиазапросов min-width постепенно добавляют возможности для больших экранов.

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<nav class="nav" style="display:flex;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (tablet+) row layout (not driven by the media query):</p>
<nav style="display:flex;flex-direction:row;gap:8px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</nav>

Подход «сначала компьютеры»

В подходе «сначала компьютеры» сначала пишут базовый CSS для больших экранов, а затем с помощью медиазапросов max-width переопределяют его для маленьких экранов.

<aside class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar — width: 100% below 768px (this preview is narrow, so the override is already visible)</aside>

Почему предпочтителен подход «сначала мобильные устройства»

Преимущества подхода «сначала мобильные устройства»:

  • Заставляет расставлять приоритеты для содержимого: что важнее всего на маленьких экранах
  • Постепенное улучшение — начните с простого и добавляйте сложность
  • Лучшая производительность — мобильное устройство загружает только базовые стили, а не переопределения
  • Соответствует действительности: большая часть веб-трафика приходится на мобильные устройства

Каскад и подход «сначала мобильные устройства»

Подход «сначала мобильные устройства» естественным образом работает с каскадом CSS. Сначала загружаются базовые стили, а переопределения для больших экранов подключаются позже с помощью медиазапросов. Это означает меньше конфликтов специфичности CSS.

Стратегия «сначала содержимое»

Прежде чем писать CSS, спросите себя: какое содержимое нужно пользователю мобильного устройства? Постройте HTML и базовый CSS вокруг ответа. На больших экранах улучшайте взаимодействие с сайтом, а не создавайте его заново.

Постепенное улучшение и плавная деградация

Постепенное улучшение (подход «сначала мобильные устройства»): начните с функционального минимума, затем добавляйте улучшения. Плавная деградация (подход «сначала компьютеры»): создайте полнофункциональную версию, затем адаптируйте её для маленьких экранов. Постепенное улучшение обычно надёжнее.

Области касания и щелчка

Мобильные пользователи используют пальцы, а не точный курсор мыши. Подход «сначала мобильные устройства» естественным образом приводит к увеличению областей касания (минимум 44x44px) и созданию подходящих интервалов между интерактивными элементами.

<button>Tap target (min 44x44px)</button>

Шаблон навигации

Навигация в подходе «сначала мобильные устройства» обычно начинается с кнопки-гамбургера или выдвижной панели, а на больших экранах превращается в видимую панель навигации:

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<button aria-label="menu" style="margin-bottom:8px;">&#9776; Menu</button>
<div class="nav-links" style="gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;margin-bottom:16px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Static reference for the ≥768px (desktop) visible nav bar (not driven by the media query):</p>
<div style="display:flex;gap:12px;background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">
  <a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>

Типографика в подходе «сначала мобильные устройства»

Сначала задайте удобные для чтения размеры шрифта на мобильных устройствах, а затем увеличьте их для больших экранов:

<p style="font-size:0.85em;color:#888;margin:0 0 6px;">Narrow (default) preview — driven by the real CSS below:</p>
<h1>Mobile heading (1.75rem)</h1>
<p style="font-size:0.85em;color:#888;margin:16px 0 6px;">Static reference for the ≥1024px (desktop) size (not driven by the media query):</p>
<h1 style="font-size:3rem;">Desktop heading (3rem)</h1>

Резиновый и адаптивный подходы

Адаптивный дизайн может быть:

  • Резиновым: использует относительные единицы и плавно подстраивается под любой размер
  • Адаптивным: переключается между фиксированными макетами в определённых точках перехода

Современная практика объединяет оба подхода: внутри точек перехода макет изменяется плавно, а в самих точках перехода используются разные макеты.

Быстрая проверка

Какой тип медиазапросов характерен для подхода «сначала мобильные устройства»?

Итоги

Подход «сначала мобильные устройства» задаёт базовые стили для мобильных устройств и использует запросы min-width для улучшения макета на больших экранах. Он поощряет расстановку приоритетов для содержимого, повышает производительность и соответствует современным особенностям трафика. Постепенное улучшение, начинающееся с маленьких экранов, создаёт более надёжные и удобные для сопровождения адаптивные макеты.

Часто задаваемые вопросы

Урок «Подход Mobile-First и Desktop-First» бесплатный?

Да — полный текст урока «Подход Mobile-First и Desktop-First» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Подход Mobile-First и Desktop-First»?

Разберитесь в различиях между стратегиями проектирования Mobile-First и Desktop-First. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Подход Mobile-First и Desktop-First»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Подход Mobile-First и Desktop-First
  2. Гибкая ширина в процентах
  3. Шаблоны Min-Width и Max-Width
  4. Адаптивные изображения и элемент Picture
← Назад к CSS Academy