Já tinha usado media queries antes, mas sempre tive uma dúvida se devo usar o min-width ou o max-width. Tem algum desses dois que é mais o certo de usar? Quando devo usar um ou outro?
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
Já tinha usado media queries antes, mas sempre tive uma dúvida se devo usar o min-width ou o max-width. Tem algum desses dois que é mais o certo de usar? Quando devo usar um ou outro?
Olá Thaynara, tudo bem?
O uso do min-width e max-width depende de como você quer que a sua página se adapte a diferentes tamanhos de tela.
O min-width é utilizado quando queremos aplicar um estilo a partir de um determinado tamanho de tela, ou seja, se o conteúdo for menor que a largura mínima, a largura mínima será aplicada. Por exemplo, se quisermos que um elemento tenha uma largura de 100% a partir de telas maiores que 768px, podemos utilizar a seguinte media query:
@media (min-width: 768px) {
.elemento {
width: 100%;
}
}Por outro lado, o max-width é utilizado quando queremos aplicar um estilo até um determinado tamanho de tela, ou seja, se o conteúdo for maior que a largura máxima, ele mudará automaticamente a altura do elemento. Por exemplo, se quisermos que um elemento tenha uma largura de 100% até telas menores que 768px, podemos utilizar a seguinte media query:
@media (max-width: 768px) {
.elemento {
width: 100%;
}
}Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!