Qual o jeito certo de se trabalhar com media queries no CSS?

CSS

CSS3

09/01/2018

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:

@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

Helena Barbosa

Curtidas 0

Respostas

Diana Magalhães

Diana Magalhães

09/01/2018

Olá Helena, tudo bem?

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!
GOSTEI 0
POSTAR