Dúvida sobre media query

Oi Eduardo, tudo bem?

A diferença entre 'media' e 'media screen' está basicamente no tipo de mídia para o qual você está aplicando o CSS.

Quando você usa 'media', você está aplicando o CSS para todos os tipos de mídia, o que inclui impressão, tela, voz, etc. No entanto, quando você usa 'media screen', você está especificamente aplicando o CSS para telas de dispositivos, como computadores, tablets e smartphones.

Agora, em relação à sua pergunta sobre o uso de 'media' para dispositivos móveis, tecnicamente, não há problema. No entanto, é importante lembrar que o CSS aplicado será válido para todos os tipos de mídia e não apenas para as telas. Isso pode não ser um problema se você estiver desenvolvendo apenas para telas, mas se você tiver diferentes estilos para diferentes tipos de mídia (por exemplo, uma versão de impressão do seu site), isso pode causar problemas.

Aqui está um exemplo prático:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Este código aplica um fundo azul claro para dispositivos com tela de até 600px de largura. Se você remover o 'screen' e deixar apenas '@media (max-width: 600px)', o fundo azul claro será aplicado para todos os tipos de mídia que tenham até 600px de largura, não apenas as telas.

Espero ter ajudado.

Um abraço e bons estudos.