Olá Nathalia, boa noite!!

*Identificando o Problema: *

De acordo com a sua pergunta, você não sabe como aplicar a media query nas paginas produtos e contato, e quer saber porque ao adicionar a tag meta de viewport ele quebro a página home que ja estava estilizada corretamente. Vamos lá!

*Solução do Problema: *

Para começar, todo arquivo html precisa ter uma tag meta de viewport, pois ela serve para fornecer instruções ao navegador de como controlar as dimensões e o dimensionamento da página. E a sua definição de tag meta esta "meia certa", pois esta faltando o valor "initial-scale=1.0". Faça desse jeito:

// A sua definição: 
<meta name="viewport" content="width=device-width">

// Coloque essa: 
<meta name="viewport" content="width=device-width initial-scale=1.0">

O porque do uso da tag de viewport foi citado acima, mas e o seus valores no content? Pois bem, o valor width=device-width serve para definir que a largura da página siga a mesma largura da tela do dispositivo (que varia de acordo com o dispositivo). Já o valor initial-scale=1.0 serve para definir o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

Para terminar, coloque essa tag tanto na pagina home, produtos, contato ou qualquer uma que você tiver.

Agora o problema da media query. A sintaxe informada por você no final da pergunta esta correta. A sintaxe:

@media tipoDeDispositivo and expressãoDeCondição {}

• 1 vem a palavra chave "@media" para definir uma media query.
• O 2 é uma valor que especifica para que tipo de dispositivo ele vai ser exibido, o valor screen quer dizer dispositivos de tela.
• o and é um operador lógico, ele adiciona mais uma condição para aplicar o estilo da media query.
• A expressão que fica em parenteses, defini limites minimos e maximos de tela para aplicar a media query.

Não entendi exatamente a sua dúvida sobre o media query, se é isso que acabei de responder ou não.

*Conclusão: *

Talvés o erro esteja na tag meta de viewport ou nas condições da media query. Outra coisa que também pode influenciar na exibição negativa da sua página, são alguns erro de javaScript. Eu vi na imagem que você posto, que você tem 61 erros emitidos no console, mas não sei exatamente que erros são, por isso, essa minha última sugestão não é certa.

*Despedida: *

Se a sua dúvida foi resolvida, não se esqueça de colocar a questão como resolvida, pois assim as pessoas que tiverem o mesmo problema que você, saberam que a sua pergunta foi resolvida e clicaram nela para saber como resolver.

Tenha um bom estudo!!