Desenvolvimento Pessoal e Comportamento

Livros, Papelaria, Filmes e Séries

Anúncio da Página

Seja Vip!

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

* campos obrigatórios

como deixar qualquer site responsivo

 

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!

Abra o seu projeto e abaixo da tag <head> coloque a seguinte linha de código:


<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'/>


Agora, vá em seu arquivo CSS...

Geralmente é uma página chamada style.css. Porém dependendo da forma como desenvolveu o CSS da página poderá ser encontrado dentro da mesma index.html junto com todo o resto do código. Nesse caso ele fica entre as tags <style></style>.

Se você esta desenvolvendo algum template para blogger o CSS fica entre as tags <b:skin></b:skin>

E cole o seguinte código: 

 /* 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) {

}


Cada medida dessas representa uma resolução de tela dos dispositivos móveis. E especifica como alguns elementos irão se comportar nelas. O que você precisa fazer é estilizar conforme cada resolução.

Não será preciso readaptar todo o css. Ao inserir o primeiro código, abaixo da tag <head> (aquele que informei acima) algumas partes de seu template provavelmente ficarão ajustadas, você precisará ajustar apenas o que não estiver adaptado da maneira que deseja dentro do media queries.
Também não é necessário repetir o mesmo código dentro de todas as resoluções de media. Funciona assim:

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.


Por exemplo:

Esse é o código da minha área de postagem e barra lateral aqui do blog:

.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;
 
  } 

*esta alinhada a direta, pois usei flexbox (display: flex;)  na área do conteúdo. A medida da área total de contéudo aqui do blog é 1100px.

para dispositivos móveis como aparelhos celulares, usei a partir da resolução de tela 480px a seguinte estilização para que a barra lateral ficasse abaixo no final de todo conteúdo:


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

.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; }
}



Acesse o blog pelo seu celular, ou se já estiver no celular observe que o conteúdo do que seria a barra lateral esta abaixo da área de conteúdo. Você pode abrir no computador para ver a diferença.

Observação: se estiver usando template para blogger, crie um blog de teste e faça primeiro as modificações por lá.
Vale lembrar que desenvolvi esse meu template do absoluto zero, não usei nenhum tema padrão existente como base! (eu uso blogger)
Por isso, se você estiver usando algum tema nativo do blogger  pode ser que dê certo ou pode ser que precise de alguns ajustes, nesse caso eu indico a leitura desse tutorial aqui da Elaine Gaspareto.

Faça conforme estilização de seu código. Algumas vezes será necessário testar através do método tentativa e erro.
Não é difícil, requer apenas atenção e paciência.

Espero ter ajudado

Até breve.

Nenhum comentário:

Postar um comentário

Bottom Ad [Post Page]

| Design Por Manuelle Viana