Что такое методология Mobile First в CSS

Mobile First — это подход к разработке интерфейсов, при котором стили сначала пишутся для мобильных устройств, а затем адаптируются для более широких экранов с помощью медиазапросов min-width.

Преимущества:

• Улучшает производительность на мобильных устройствах (загружаются только необходимые стили).
• Упрощает поддержку, так как базовая версия — самая простая.
• Соответствует принципу прогрессивного улучшения.

Пример:

/* Базовые стили для мобильных */
.container {
  padding: 10px;
}

/* Адаптация для планшетов */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

/* Адаптация для десктопов */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Альтернатива: Desktop First (использует max-width). Mobile First считается более современным подходом.