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?
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!