Media Queries e Responsividade com CSS

Atualmente, ao se construir uma página web deve-se ter em mente que ela deve estar responsiva para tamanhos diferentes de tela. Telas de notebooks são maiores que de celulares, por exemplo. 

Para isso utilizamos as Media Queries, esse recurso do CSS nos ajuda a adaptar nossa estilização para diferentes tamanhos de tela, sendo que existem alguns tamanhos comuns que eu costumo utiliza:

• mínimo de 320px e máximo de 480px, para dispositivos móveis. Utilizo para potencialidades se necessário mas eu geralmente começo a construir pensando em dispositivos menores para depois ir aumentando de tamanho.
• mínimo de 481px e máximo de 768px, para tablets. 
• mínimo de 769px e máximo de 1024px, para laptops
• mínimo de 1025px e máximo de 1200px, para telas grandes
• mínimo de 1201px, para telas muito grandes. Nesse último colocamos apenas o mínimo para que ele vá de 1201px até a maior tela existente. 

Muitos números? Sem problema, sempre que precisamos podemos ir na internet consultar, o que devemos saber é que adicionando esses números na estrutura de bloco do media querie, a estilização que for colocada dentro dela será apresentada quando a tela chegar ao mínimo. Um exemplo é se quisermos que uma imagem tenha diferentes tamanhos em cada tela, colocamos a estilização própria em cada bloco media querie, como o abaixo:

@media (min-width: 481px) and (max-width: 768px) {
}

Agora, como atividade que tal deixar o projeto do Decodificador de Texto responsivo para outras telas? Um abraço, e até a próxima.

Blog: https://francileudo-frontend.blogspot.com/2022/10/media-queries-e-responsividade-com-css.html