Ir para conteúdo
Entre para seguir isso  
Biel.

resumir codigo css

Recommended Posts

Boa noite a todos. Direto ao ponto. Pessoal como faço para resumir o EX 3 abaixo

este exemplo NÃO está resumido. Repetir as mesmas informações nas três divs 
#aprendiz_01{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
#aprendiz_02{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
#aprendiz_03{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}

este exemplo está resumido. Não foi preciso Repetir as mesmas informações nas três divs 
#aprendiz_01,
#aprendiz_02,
#aprendiz_03{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}

...

Este  EX 3 não está resumido, gostaria de saber como resumir.

EX 3 
@media (min-width:340px) {
#rtgh_03{ width:42%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:480px) {
#rtgh_03{ width:49%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:768px) {
#rtgh_03{ width:60%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:1024px) {
#rtgh_03{ width:65%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

@media (min-width:1366px) {
#rtgh_03{ width:69%; height:auto; float:left; text-align:left; border:1px solid #3C0; margin:0% 0% 0% 3.3%;}
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Use classes para agrupar elementos com propriedades idênticas.

Atenha-se ao que foi perguntado. A redução de media-queries não difere quanto ao uso de classes ou id's.

 

--------------------------------------------------------------------------------------------------------------------------------------

 

Biel,

 

Você não vai conseguir reduzir um grupo de media queries a um só, a não ser que esteja trabalhando com SASS, SCSS, LESS ou Stylus (que são pré processadores de CSS).

 

A necessidade de que eles sejam replicados é em questão ao tamanho. Você obrigatoriamente precisa definir quais propriedades o elemento receberá em determinado tamanho de tela, ou seja, haverá replicações de código.

 

O que você pode fazer é eliminar os elementos que nele já estão presentes fora do Media Query. Exemplo:

.elemento {
   width: 100%; /* Será alterado */
   height: 100px; /* Será alterado */
   background: red;
   text-align: left;
   opacity: 0.8;
   color: green;
}

@media screen and (max-width: 750px) {
   .elemento { width: 50%; height: auto; }
}
@media screen and (max-width: 450px) {
   .elemento { width: 40%; height: auto; }
}

Em questão aos pré-processadores, ao invés de replicar, você pode criar uma condição for. Veja um exemplo de como seria no Stylus:

/* Stylus */
.elemento
   for i in 1..5
      @media (min-width: 2**(i+7)px)
         width: 150px * i

/* Compilado */
@media (min-width: 256px) {
   .elemento {
      width: 150px;
   }
}
@media (min-width: 512px) {
   .elemento {
      width: 300px;
    }
}
@media (min-width: 1024px) {
   .elemento {
      width: 450px;
   }
}
@media (min-width: 2048px) {
   .elemento {
      width: 600px;
   }
}
@media (min-width: 4096px) {
   .elemento {
      width: 750px;
   }
}

Agora é só ir treinando e boa sorte!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.