Em alguns cursos eu vi escrever:
ex: @media screen and (min-width: 720px)
Neste curso vi que não colocam o screen and
Podem explicar a diferença e se interfere em algo?
Obrigada!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Em alguns cursos eu vi escrever:
ex: @media screen and (min-width: 720px)
Neste curso vi que não colocam o screen and
Podem explicar a diferença e se interfere em algo?
Obrigada!
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!