Como deixar qualquer site responsivo - Media Queries

É imprescindível que uma página seja adaptável aos diversos tamanhos de tela existentes. Isso porque cada vez mais pessoas acessam os sites de seus dispositivos móveis como celulares e tablets. E é um critério para indexação no Google.

Fala Devs!

Um artigo de utilidade pública para quem está iniciando nesse mundo de desenvolvimento web.

Se você é autodidata, como eu, e esta estudando esse universo por conta própria talvez possa estar com alguma dificuldade nesse sentido. Mesmo que já tenha aprendido a desenvolver uma bela página web.

A princípio pode parecer um "bixo de sete cabeças" imaginar como fazer o site que você criou ficar responsivo. Mas a boa notícia é que se você já tem conhecimento suficiente em HTML e CSS para criar uma página web o processo é bem fácil, Juro! 

Por incrível que pareça quando eu estava aprendendo como fazer, não achei nenhum artigo nesse "Google de meu Deus" que tivesse com todas as informações completas e que explicasse o que fazer passo-a-passo. Eu tive que juntar uma informação dali, outra daqui e testar, vendo o que alterava e o que acontecia em cada detalhe que eu editava.

É a coisa mais fácil do mundo, mas quando a gente não sabe e não encontra quem ensine a impressão que dá é que não vamos conseguir...

Por isso eu resolvi presentear vocês com esse artigo. Me valorizem hein!

Vamos lá?

Como deixar qualquer site responsivo -  Media Queries Na Prática!

<meta content='width=device-width' name='viewport'/>

<meta content='width=device-width, initial-scale=1.0' name='viewport'/>

  <meta content='IE=edge' https-equiv='X-UA-Compatible'/>

 /* MEDIA QUERIES- DEFINE A RESPONSIVIDADE
----------------------------------------------- */
@media screen and (max-width : 1152px) {



}
@media screen and (max-width : 1024px) {


}

@media screen and (max-width : 900px) {


}
@media screen and (max-width : 768px) {


}
@media screen and (max-width : 736px) {

}
@media screen and (max-width : 600px) {

}
@media screen and (max-width : 480px) {

}
@media screen and (max-width : 375px) {

}
@media screen and (max-width : 360px) {

}
@media screen and (max-width : 320px) {

}

Se você define que o blog a partir da resolução 1024px irá se comportar de determinada maneira isso significa que esse comportamento vai se manter até a próxima media queries definida. Se nada for definido, valerá o que estiver na media mais próxima.

.page-de-posts .container{

      align-content: center;
      max-width: 1100px;
      display:flex;
      justify-content: space-between;
 margin-left: auto;
    margin-right: auto;

  }

.sidebar{
      
      max-width: 240px;
      width: 100%;
      margin:0 10px;
      padding: 20px 0;	
 
  } 

.page-de-posts .container{
      padding: 50px 50px;
      align-content: center;
      max-width: 1100px;
      display:flex;
	  flex-direction: column;
      justify-content: space-between;
     margin-left: auto;
    margin-right: auto;

  }

.sidebar{
      
      max-width: 480px;
      width: 100%;
      margin:0;
      padding: 20px 0;	
 
  } 
}