Что означает «mobile-first»

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 6 из 35.

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

Начните с написания мобильных стилей:

body {
  font-size: 16px;
  padding: 10px;
}

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

/* Стили для устройств шире 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Этот подход гарантирует, что ваш сайт сначала будет корректно работать на небольших экранах, а затем расширяет возможности для пользователей устройств с большими экранами.

Задание

Легко

Вам предоставлен HTML-код с простым навигационным меню. Ваша задача — стилизовать его, используя подход mobile-first.

1. Сначала стили для мобильных устройств

Сделайте так, чтобы каждый пункт меню занимал всю ширину контейнера (располагался вертикально).
Установите для ссылок display: block, чтобы они занимали всю ширину. Остальное оформление (цвета, границы и т. д.) остается на ваше усмотрение. Это может выглядеть так, как на примере ниже.

2. Стили для больших экранов

Медиа-запрос для экранов с min-width: 768px уже предоставлен.
Внутри него измените макет меню на горизонтальный, используя display: flex для класса .menu.
Отрегулируйте отступы между пунктами меню, чтобы они соответствовали примеру на изображении ниже.

Шпаргалка

Mobile-first — это стратегия дизайна, при которой вы сначала создаете веб-сайт для мобильных устройств, а затем постепенно улучшаете его для экранов большего размера.

Начните с написания стилей для мобильных устройств:

body {
  font-size: 16px;
  padding: 10px;
}

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

/* Стили для устройств шире 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Этот подход гарантирует, что ваш сайт сначала будет хорошо работать на маленьких экранах, а затем улучшит взаимодействие для пользователей на устройствах с большими экранами.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>