Um site, todos os tamanhos

Um site precisa funcionar no celular e no desktop. A ferramenta para isso é a media query: um bloco de CSS que só vale em certos tamanhos de tela.

/* estilo padrão (celular primeiro) */
.menu { font-size: 14px; }

/* só em telas com 700px ou mais (desktop) */
@media (min-width: 700px) {
  .menu { font-size: 18px; }
}

A ideia mobile-first: escreva primeiro para o celular (mais simples) e use @media (min-width: ...) para adicionar ajustes nas telas maiores.

🧠 Modelo mental: a media query é um "SE a tela for grande, ENTÃO aplique estas regras". O CSS de fora vale para todos; o de dentro só para o tamanho pedido.