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.
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.
hoje, com a Alura e o Google Gemini
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.