5 truques CSS úteis para Design Responsive
Autor: Sando Rocha | Publicado: 2016-06-24T19:35:00-03:00

Tornar o design de ser sensível é muito fácil, como mostrado no meu projeto Responsive em 3 etapas tutorial, mas mantendo os elementos para olhar esteticamente equilibrada em todos os layouts de ponto de interrupção é uma arte. Hoje eu estou indo para compartilhar 5 dos meus truques CSS comumente usados ​​juntamente com casos de amostras para codificação projetos ágeis. Eles são simples propriedades CSS tais como min-width, max-width, excesso, e valor relativo - mas essas propriedades desempenham um papel importante no design responsivo.





1 -Vídeos HTML5 elásticas (demo)
Este truque de vídeo CSS responsiva foi descoberto por tjkdesign.com

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }&nbsp;
.video-container iframe, .video-container object,&nbsp;
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&nbsp;
&nbsp;
Propriedade max-width permite definir a largura máxima do elemento. O objectivo da Max-largura
é para impedir que o elemento que se prolonga a partir da fronteira.
Max-Largura Container
 .container { width: 800px; max-width: 90%; } 

  2-Imagem Responsive 
 Você pode fazer o auto imagem redimensionada para a largura máxima do limite usando max-width: 100% e height: auto. 
 &nbsp;
img { max-width: 100%; height: auto; }
&nbsp; 
  O CSS imagem responsiva acima funciona no IE7 e IE9, mas não funciona no IE8.  Para corrigi-lo, adicione width: auto.  Você pode aplicar uma CSS condicional especificamente para o IE8 ou usar o IE cortar abaixo: 
 &nbsp;
@media \0screen { img { width: auto; /* for ie 8 */ } } 

 3-Min-Largura ( demonstração )

 
 Min-largura é opposit para max-width.  Ele define a largura mínima de um elemento. 
 No exemplo abaixo formar, min-width é usada no campo de texto de 
entrada para evitar a entrada de ficar muito pequena quando a escala 
para baixo. 
&nbsp;

3. valores relativos ( demonstração ) 
 Em design responsivo, sabendo quando usar valor relativo pode simplificar o CSS e maximizar o melhor resultado layout.  Abaixo estão alguns exemplos. 

  Margem relativa 
 Abaixo está um exemplo de uma comment list onde margem esquerda relativa é utilizado para espaçar os comentários rosca.  Em vez de usar o valor pixel fixo, eu usei valor percentual para o espaço fora das sub-listas. 
 Como mostrado no lado esquerdo da tela, a caixa de conteúdo nas 
sub-listas fica muito pequena no celular resolução, se foi utilizado 
deixaram de pixel da margem. 

  Relativa Tamanho da Fonte 
 Com valor relativo (ex. Em ou%), o tamanho da fonte, line-height e espaçamento de margem pode ser herdada. 
 Por exemplo, eu posso mudar o tamanho da fonte em todos os elementos 
descendentes simplesmente mudando o tamanho da fonte no elemento pai. 

  Preenchimento relativa 
 A imagem abaixo mostra que é melhor usar relativa percentual de preenchimento em oposição ao preenchimento de pixel fixo.  A caixa à esquerda mostra um espaço de preenchimento desequilibrada, se foi utilizado pixel de preenchimento.  A caixa com percentual de preenchimento da direita mostra que a área de conteúdo é maximizada. 

  4. overflow: hidden Trick ( demonstração ) 
 Como postado no meu artigo anterior, você pode limpar flutuador com a propriedade overflow .  Este truque é extremamente útil. 
 Você pode limpar o flutuador do elemento anterior e manter o conteúdo 
em execução dentro do recipiente através da aplicação de overflow: 
hidden. 

  5. Palavra-break ( demonstração ) 
 Eu também falou sobre a propriedade palavra-wrap antes.  Você pode forçar o texto unbreaking (ex. Texto longo URL) para embrulhar em vez de correr em uma única linha. 
 .break-word { word-wrap: break-word; } &nbsp;