Qué significa “mobile-first”

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 6 de 35.

Mobile-first es una estrategia de diseño en la que creas tu sitio web primero para dispositivos móviles y después lo mejoras progresivamente para pantallas más grandes.
La idea principal es que la mayoría de los usuarios ahora navegan por la web desde sus teléfonos, por lo que empezar con algo pequeño garantiza que tu sitio funcione bien para la mayoría de los visitantes.

Comienza escribiendo los estilos para móviles:

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

Después, usa consultas de medios para adaptar tu diseño a pantallas más grandes:

/* Estilos para dispositivos más anchos que 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Este enfoque garantiza que su sitio funcione bien primero en pantallas pequeñas y luego mejore la experiencia para los usuarios en dispositivos más grandes.

Desafío

Fácil

Se te proporciona HTML con un menú de navegación sencillo. Tu tarea es darle estilo utilizando el enfoque mobile-first.

1. Primero, los estilos para dispositivos móviles

Haz que cada elemento del menú ocupe todo el ancho del contenedor (apilados verticalmente).
Haz que los enlaces tengan display: block para que ocupen todo el ancho. El resto del estilo (colores, bordes, etc.) depende de ti. Puede verse así en la imagen de ejemplo de abajo.

2. Estilos para pantallas más grandes

Ya se proporciona una consulta de medios para pantallas de min-width: 768px.
Dentro de ella, cambia el diseño del menú a horizontal utilizando display: flex para .menu.
Ajusta el espaciado entre los elementos del menú para que coincida con la imagen de ejemplo de abajo.

Pruébalo tú mismo

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