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

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

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:

@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