Qué significa “mobile-first”

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

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

Empieza 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 con un ancho superior a 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Este enfoque garantiza que tu sitio funcione bien primero en pantallas pequeñas y después mejora la experiencia de 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 usando el enfoque mobile-first.

1. Primero, los estilos para 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.) queda a tu criterio. 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 min-width: 768px.
Dentro de ella, cambia la disposición del menú a horizontal usando display: flex para .menu.
Añade un margin-right a cada elemento del menú (.menu li) para separar los elementos, como en 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>