Descrição do @media

Ola Leticia, tudo bem?

O screen é um media-type, ele funciona como um seletor do @media para especificar o tipo de dispositivo em que aquele css será aplicado, mas na maioria dos casos ele não é necessário.

Como assim? No caso do screen ele refere que o dispositivo será uma tela (pode ser um monitor, um celular ou tablet) e caso omitido ele funcionará para todos os dispositivos, isso porque o valor default é all (todos).

Além de screen, outros valores aceitos são print e speech.

Um experimento legal que você pode fazer pra entender melhor a função do media-type é com o print.

Digamos que você desenvolveu uma pagina que será um recibo e precisa imprimi-lo. Você consegue fazer um CSS exclusivamente para a impressão e nele você faz as configurações CSS como tamanho da fonte, alinhamento e o que mais for pertinente.

Quando você visualizar esse recibo no navegador, vai parecer que o CSS não está sendo aplicado, mas se você clicar em imprimir, você verá que as regras CSS foram aplicadas.

Espero ter ajudado e bons estudos!

Obrigada pelo esclarecimento!