Olá, tenho bastante dúvida nessa questão pois já vi devs usando de formas diferentes no @media na hora de fazer a responsividade do site. Tenho dificuldade nessa parte ainda e não sei qual a diferença e quando usar cada uma dessas opções.
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!
Solucionado
Olá, tenho bastante dúvida nessa questão pois já vi devs usando de formas diferentes no @media na hora de fazer a responsividade do site. Tenho dificuldade nessa parte ainda e não sei qual a diferença e quando usar cada uma dessas opções.
Basicamente: Quando você usa apenas @media, e passa o tamanho max ou min, ele vai aplicar esta configuração tanto para telas, quanto por exemplo, para impressoras, então se você for imprimir o documento, e ele estiver dentro do max ou min, ele também vai aplicar este css na impressão. Quando você diz @media screen, está especificando que a configuração só será aplicada em telas, em monitores, e não na impressão. Se você quer mudar algo apenas na hora de imprimir, da para usar o @media print. A questão do only, era utilizado em navegadores antigos, pois eles não diferenciavam o @media screen do @media print, então utilizava-se o only, mas em navegadores mais modernos não é necessário. Há uma discussão no Stackoverflow sobre tudo isso que foi mencionado, se quiser dar uma olhada: https://pt.stackoverflow.com/questions/341742/usar-media-media-screen-and-ou-media-only-screen-and-tem-alguma-diferen%C3%A7a
Muito obrigada pelos esclarecimentos :D
Muito boa a Matheus Martins,
Essa também foi uma dúvida que surgiu pra mim aqui e ficou bem esclarecido.
Muito Obrigado!!!
Muito bem Matheus Martins, essa também era minha dúvida. Obrigado a você e a Jéssica Motta que apontaram essa discussão no fórum.