Em relação a responsividade

Olá, André!

Uma das maneiras de se fazer a responsividade seria essa que você citou sim, com várias media queries.

Geralmente, se usa uma em torno de 480 pixels para mobile, outra entre 480 e 800 pixels para tablet, uma terceira entre 800 e 1360 pixels para notebooks e a última para telas maiores que 1360 pixels. Como o header da página tem tamanho fixo de 940px, você poderia ainda incluir uma media query para essa resolução.

Ficaria assim:

@media(max-width: 480px) {
    body {
        background-color: red;
    }
}

@media screen and (min-width: 481px) and (max-width: 800px) {
    body {
        background-color: blue;
    }
}

@media screen and (min-width: 801px) and (max-width: 1360px) {
    body {
        background-color: green;
    }
}

@media screen and (min-width: 1361px) {
    body {
        background-color: yellow;
    }
}

Existem práticas mais dinâmicas, que utlizam outras especificações CSS e tecnologias, mas são assuntos de outros cursos.

Espero ter ajudado!

Continue firme em seus estudos!