Design responsivo: aprenda como usar media queries sem complicação - * Blog Elaine Gaspareto *

Design responsivo: aprenda como usar media queries sem complicação

Publicado em 27/03/2018

Design responsivo: aprenda como usar media queries sem complicação
Olá, pessoas!
Vamos seguir com a Série Como tornar responsivo um template nativo do Blogger?
No tutorial de hoje eu vou falar um pouco sobre as media queries, conforme prometi no último post publicado dentro da série.
Obviamente não vou usar termos técnicos e nem vou aprofundar muito o tema, que é amplo e requer muito mais do que um post pra ser bem explicado.
Vou, isso sim, tentar dar, em linhas gerais, uma noção bem básica de como usar as media queries para deixar redondinha a personalização do seu template responsivo nativo do Blogger, sem complicação e com o mínimo de erros possíveis.
Vamos trabalhar?


Media queries: o que são e para que servem?


Para começar vamos voltar no primeiro post dessa série, onde eu ensinei a forma mais completa de tornar responsivo um template nativo que use como base o modelo Viagem, do Blogger.
Usamos o Template Catherine, personalizado na Série Como personalizar o blog passo a passo.

Quando tornamos esse template responsivo eu adicionei, abaixo da tag de fechamento da folha de estilos, uns códigos que definem a responsividade.
O código é esse, role a página e localize CÓDIGO MEDIA QUERIES.
Observe o código.

Note que, basicamente, ele especifica como alguns elementos vão se comportar em determinadas resoluções de tela.
Vou dar um exemplo prático:

@media screen and (max-width : 1152px) {
.sidebar .widget h2 {width:108%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:225px !important;height:195px !important;}
#related-title {color:#222;text-align:center;text-transform:none;padding: 0px 5px 15px;font-size:14px;width:225px !important; height: auto;}
}

Este é o trecho completo que especifica como alguns elementos vão se comportar na resolução de tela 1152px.

Nesse caso eu defini que o fundo dos títulos da coluna lateral (.sidebar .widget h2) mediriam 108% de largura.
Fiz isso porque senão faltaria cor de fundo para a largura da caixinha do gadget.
E descobri isso porque fui testando no site Testar resoluções de tela.
Alterava as medidas e testava até ficar como eu desejava.

No caso das postagens relacionadas (#related-posts .related_img), que por padrão não são responsivas, eu fiz exatamente a mesma coisa: ajustei a largura das miniaturas até caber certinho dentro da área do post.
Ajustei também a altura das miniaturas, o tamanho da fonte, etc...

E fiz isso para cada uma das principais resoluções de tela.
Sim, dá trabalho!
Por isso que sempre devemos preferir elementos que já sejam responsivos (como é o caso do menu e dos botões de compartilhar, por exemplo).
Aí o trabalho diminui consideravelmente.

Outra função muito importante das media queries é definir a partir de qual resolução de tela o blog vai mudar de formato e a sidebar vai passar a aparecer abaixo dos posts e não mais ao lado.
No caso do meu blog de testes usado no tutorial eu defini que isso aconteceria a partir da resolução de tela 900px.
Veja o trecho do código que define isso (marcado em azul):

@media screen and (max-width : 900px) {
.sidebar .widget {margin-left:-7px;margin-right: -5px;}
.sidebar .widget h2 {width:103.5%;}
.main-inner .column-center-outer {width:100%;}
.main-inner .column-center-inner {padding: 0 1em;}
.main-inner .column-right-outer{width:100%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:210px !important;height:180px !important;}
#related-title {color:#222;text-align:center;text-transform:none;padding: 0px 5px 15px;font-size:13px;width:210px !important; height: auto;}
}

Isso significa que a partir da resolução 900px a área do post vai ocupar a largura total da tela e a coluna lateral passa a ser exibida abaixo da área dos posts.
Legal, né?

Mais uma função das media queries é ocultar elementos de página que você não quiser exibir no celular, por exemplo.
Vamos supor que eu tenha um slide no blog mas não quero que ele seja visível no celular.
Eu defino que o tal slide não vai aparecer nas resoluções a partir de 600px (exemplo, tá?).
Para fazer isso eu localizo o ID do elemento que quero ocultar e insiro esse ID dentro da media querie que escolhi, no caso, 600px.
Ficaria assim:

@media screen and (max-width : 600px) {
#HTML3{display: none;}
}

Entenda o comando:
# todo elemento de página que foi inserido manualmente no template tem que ser precedido do sinal #.
Se for um elemento estrutural do template (sidebar, por exemplo) aí não use # mas sim o .
Exemplo: .sidebar .widget
HTML3 é o ID do meu slide. Todo elemento de página tem um ID, a gente localiza editando o elemento.
Se não tiver ID por ter sido inserido direto no código fonte basta nomear o elemento exatamente como ele aparece no template.
Exemplo de elemento sem ID, mas nomeado: #related-posts
display: none; é o comando que manda ocultar o elemento de página a partir dessa resolução.

Importante: sempre que for inserir algum comando dentro da medias queries ele precisa estar corretamente fechado, ok?
Observe:

#HTML3{display: none;}

{ abre e } fecha.


Falando nisso, veja a estrutura das media queries:

@media screen and (max-width : 1024px) {
AQUI DENTRO DEVEM ESTAR TODOS OS ESTILOS
}

Entenda o esquema:
@media screen and é a abertura do comando; todas as media queries precisam sempre começar assim;
(max-width : 1024px) é a resolução a ser trabalhada; define como o blog vai se comportar dessa resolução até a próxima que for especificada;
{ abre a folha de estilos específica dessa resolução;
AQUI DENTRO DEVEM ESTAR TODOS OS ESTILOS o próprio enunciado é claro; aí dentro vai todo o estilo dessa resolução; é possível mudar tudo: se quiser uma fonte maior, mudar tipo e cor de fonte, ocultar elementos, etc...
} fecha a folha de estilos específica dessa resolução de tela.


Quantas media queries eu preciso ter no template?



Aí é questão de optar.
Eu, em geral, uso as mais comuns e mais abrangentes: 1280px, 1152px, 1024px, 900,  800, 736, 640, 414, 360, etc...
Tem que testar mas em geral essas são as mais comuns.

Na prática funciona assim:
Se eu defino que o blog, na resolução 1024px vai se comportar de determinada maneira isso significa que esse comportamento vai se manter até a próxima media query definida. Se nada for especificado vai valer sempre a media query mais próxima.
Entendeu?

Media queries na prática- como usar no blog


Agora vamos fazer um exercício simples?
Vamos supor que você tenha inserido em seu blog o resumo automático de posts conforme ensino aqui:

https://www.elainegaspareto.com/2018/02/resumo-automatico-para-posts-do-blog.html

Tudo lindo, tudo funciona mas aí você descobre que em algumas resoluções de tela o botão Leia mais está descentralizado, todo desconfigurado.
Olha como fica, sem os ajustes nas media queries:



E agora? Quem poderá nos ajudar?
As media queries, pequeno leitor!
No caso específico do Template Catherine eu montei o código do botão LEIA MAIS assim:

Resolução 1152px:
#showlink {margin-right: 17em;margin-bottom: 2em;margin-top:1.8em;}

Resolução 736px:
#showlink {margin-right: 12em;}

Resolução 360px:
#showlink {margin-right: 1.5em !important;}

E fui testando até posicionar como eu queria.
Fiz isso e tudo ficou lindo.
Sim, é trabalhoso mas simples.
Veja como ficou o Template Noelle, com os posts resumidos na página inicial, e modificado a partir do Template Catherine para ser praticamente outro template.

Dicas extras muito legais:

1- O importante, nesse caso específico do botão LEIA MAIS, é atentar para o valor expresso em margin: quanto mais mexer no valor em margin-right mais o botão vai pra direita; margin-top leva o botão pra cima e margin-bottom desce o botão.
Mas vai precisar mexer basicamente só em margin-right. Tem que ir testando, mas é muito simples!

2- Os valores estão na medida em, que é a medida "responsiva".
Assim: margin-right: 17em;
Se mudar pra 19em o botão vai mais pra esquerda, se mudar pra 10em vai pra direita.
Percebe a lógica?

3- Em resoluções menores pode ser preciso adicionar um comando extra pra forçar o ajuste.
A resolução 360px  fica assim:
#showlink {margin-right: 1.5em !important;}
Não esqueça o !important pois faz diferença em resoluções menores. Ele força o ajuste.

4- A maioria das media screen nem precisa corrigir o código, só de colocar o 1152px já vai ajustar a maioria, mas se precisar, vá inserindo e testando.

5- Até aqui falamos das media queries aplicadas especificamente ao Template Catherine.
Mas, claro, o tutorial se aplica a qualquer template nativo do Blogger.
O importante é o conceito, entende?


No próximo tutorial, para finalizar essa parte, vamos construir e aplicar as media queries em um outro template nativo do Blogger, usando uma base personalizada por mim usando o Modelo Simples.
Assim você verá na prática como é simples e fácil.


Template Noelle grátis para baixar e usar


E pra te deixar feliz que tal baixar o Template Noelle já responsivo, com resumo automático e com algumas coisas modificadas em relação à versão Catherine que finalizamos na Série Como personalizar o blog passo a passo?
Quer?
Então clica no botão abaixo e baixe o template modificado, completinho e use, seja em seu blog ou como base de estudo pra entender tudo!
Na pasta zipada você vai encontrar o arranjo floral que usei, a fonte que usei no nome Noelle e o arquivo .xml do template.
Este arquivo .xml é o que você deve instalar em seu blog de testes, ok?



Baixar Template gratuito


Importante:
Não retire e nem altere os créditos, ok?
De resto pode mexer como desejar!
Divirta-se!

E a gente se vê em breve com a parte final dessa série, tá?
Não vá se atrasar!






9 comentários via Blogger
comentários via Facebook

9 comentários:

  1. Ah você é demais! A cada post fico mais fã!
    Obrigada por nos ajudar com suas dicas maravilhosas!
    Beijos

    ResponderExcluir
  2. Elaine o tamplate ficou lindo! Só queria saber se tem como mudar a aparência dele quando visualizado na versão para celular,é um aspecto que me incomoda bastante. Por favor! Gostaria muito de resolver esse aspecto. Será que tem como?? Aguardo retorno.

    ResponderExcluir
    Respostas
    1. Leh, não entendi.
      Vc marcou a opção Não para não mostrar a versão do Blogger para celular?
      Qual o endereço do blog?

      Excluir
    2. Elaine muito obrigada!!! estava fazendo de forma errada e agora concertei o erro. <3

      Excluir
  3. Oi Elaine, ainda estou me torando segura nas configurações do template que já está no meu blog de testes. Observei que os botões no final da postagem funcionam ok, menos o meu amado Pinterest e o zap. Você pode me dar uma orientação? (https://reginabomfim.blogspot.com.br). Grata

    ResponderExcluir
  4. Oi Eliane, peço que desconsidere meu comentário anterior. Fiz tudo rápido e não dei as informações corretamente. Baixei o template Noely que está ainda no meu blog de testes (https://deliciadeideias.blogspot.com.br) e observei que os botões de final de post do Pinterest e do que suponho ser o Whatsapp não estão funcionando. Grata se puder me dar um auxílio.

    ResponderExcluir
    Respostas
    1. Regina, não sei o motivo de estar com erro, vi agora no blog de testes e tá normal, mas você pode substituir o código do template pelo código original dos botões, está nesse post aqui: https://www.elainegaspareto.com/2016/12/botoes-personalizados-para-compartilhar.html
      Quanto ao whatsapp ele não vai funcionar no pc, só no celular, claro.
      bjssss

      Excluir
  5. Olá Elaine. Queria tirar uma dúvida, li umas três vezes esse post do Media Queries, e não entendi nada kkkk, sou leiga para essas coisas, mas a minha dúvida é a seguinte, estou construindo o meu template conforme os tutoriais que você ensina aqui, o meu esta responsivo, tudo certinho, entro naquele site que você recomendou (Testar resoluções de tela)para ver como o meu blog fica, principalmente em celular, e nesse site, em todas as resoluções, os meus botões de compartilhar, link de comentário e marcadores e até o botão Leia Mais aparecem, normal, super bonitinhos. Mas ai quando vou ver pelo meu próprio celular, ele não está assim. Na tela inícial, os post estão super resumido, sem estilo nenhum, e os link do botão Leia Mais ou dos de compartilhamento não aparecem. Baixei o template Noele para teste, mas ficou da mesma forma.

    Poderia me informar porque isso ocorre, ou se tem algum outro tutorial que explica essa ocorrência.

    Grata!

    ResponderExcluir
    Respostas
    1. Para que o template apareça no celular vc precisa ir em Tema/Celular e marcar a caixinha Não. Mostrar tema para computadores em dispositivos móveis.
      Eu explico isso em um dos posts e em um dos vídeos.
      Se não fizer isso vai prevalecer a formatação nativa do Blogger...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…