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

Часть раздела Практический фронтенд путешествия по HTML на Coddy. Урок 6 из 35.

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

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

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

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

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

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

Задание

Легко

Вам дан HTML с простым меню навигации. Ваша задача — оформить его с использованием подхода «сначала мобильные устройства».

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

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

2. Стили для экранов большего размера

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

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

<!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>