Fórum Qual o jeito certo de se trabalhar com media queries no CSS? #590382
09/01/2018
0
Oi gente,
Uma dúvida: estava usando no meu arquivo CSS media queries. Eu costumo usar para uma media query, um largura mínima e uma largura máxima, por exemplo:
Só que um colega de trabalho meu disse que desse modo estarei usando muitas linhas de código desnecessárias. Ele disse que é melhor eu definir somente a largura mínima ou a largura máxima, como por exemplo:
Não entendi bem o porquê ele falou isso. Acredito que entre os dois modos de se utilizar a media query devem existir vantagens e desvantagens. Alguém pode clarear essa questão para mim?
Uma dúvida: estava usando no meu arquivo CSS media queries. Eu costumo usar para uma media query, um largura mínima e uma largura máxima, por exemplo:
@media (min-width: 768px) and (max-width: 1200px){
// Estilos aqui
}
Só que um colega de trabalho meu disse que desse modo estarei usando muitas linhas de código desnecessárias. Ele disse que é melhor eu definir somente a largura mínima ou a largura máxima, como por exemplo:
@media (min-width: 768px){
// Estilos aqui
}
Não entendi bem o porquê ele falou isso. Acredito que entre os dois modos de se utilizar a media query devem existir vantagens e desvantagens. Alguém pode clarear essa questão para mim?
Helena Barbosa
Curtir tópico
+ 0
Responder
Posts
24/01/2018
Diana Magalhães
Olá Helena, tudo bem?
Olha, até entendo o que o seu colega falou. Imagine o seguinte caso:
E também esse abaixo
Não seria melhor usar o primeiro caso ao invés do segundo, já que eles fazem o mesmo? Você economiza muitas linhas no seu CSS. Porém, caso você queria personalizar mais a cada dimensão da tela, o segundo caso é o mais indicado.
Respondendo sua pergunta, não digo que é uma questão de jeito certo, mas sim do que mais se aplica sua necessidade.
Espero ter ajudado!
Olha, até entendo o que o seu colega falou. Imagine o seguinte caso:
@media(min-width: 1366px){
.titulo{font-size: 20px; color: #989898; font-weight: bold; text-transform: uppercase;}
}
E também esse abaixo
@media(min-width: 1200px) and(max-width: 1366px){
.titulo{font-size: 28px; color: #989898; font-weight: bold; text-transform: uppercase;}
}
@media(min-width: 980px) and(max-width: 1199px){
.titulo{font-size: 28px; color: #989898; font-weight: bold; text-transform: uppercase;}
}
@media (min-width: 768px) and (max-width: 979px){
.titulo{font-size: 28px; color: #989898; font-weight: bold; text-transform: uppercase;}
}
@media(max-width: 767px){
.titulo{font-size: 28px; color: #989898; font-weight: bold; text-transform: uppercase;}
}
Não seria melhor usar o primeiro caso ao invés do segundo, já que eles fazem o mesmo? Você economiza muitas linhas no seu CSS. Porém, caso você queria personalizar mais a cada dimensão da tela, o segundo caso é o mais indicado.
Respondendo sua pergunta, não digo que é uma questão de jeito certo, mas sim do que mais se aplica sua necessidade.
Espero ter ajudado!
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)