O que é Responsive Web Design?
Ou é template blogger ou qualquer outro modelo de web, geralmente podemos chamá-lo de "Responsive Web Design". Deixe-me descrever em palavras simples e comuns, capacidade de resposta é uma característica do tema web que permite que o projeto para caber em qualquer tamanho de tela. No mundo de hoje, a tecnologia, as pessoas usam diferentes dispositivos como laptop, tablet, celular para navegar na internet, que têm diferentes tamanhos de tela e os nossos temas web deve ser otimizado para todos os tamanhos de tela para ajustar automaticamente em qualquer dispositivo para que os usuários não venham a enfrentar qualquer problema enquanto navega no nosso blog ou site.
Há várias razões para fazer o nosso blog temas responsivo, o primeiro e simples, que melhora a interface do usuário, ele pode aumentar seu trafego tablet e usuários móveis e também pode gerar mais dinheiro com ele se exibir anúncios sensíveis que podem aparecer em qualquer tamanho de tela .
Coisas para saber antes
Antes de iniciar o tutorial, deixe-me saber, ou você vai ser capaz de transformar a capacidade de resposta em seu modelo blogueiro ou não.
CSS Habilidade: Você tem habilidade em css? Sim? Otimo! Trazendo a capacidade de resposta a template blogger é todo o trabalho CSS e se você tiver a habilidade nela que você pode não enfrentar qualquer problema nisso.
Estrutura modelo: Você conhece a estrutura do seu template blogger? Se o modelo é projetado por você do que você deve saber como você embrulhou o cabeçalho, conteúdo e outras seções. Ao fazer template blogger ágil, vamos jogar com cada elemento HTML e para isso temos que saber como o modelo está estruturado. Se o modelo não foi projetado por você do que você pode dar uma olhada em sua estrutura e estudá-lo do que você pode continuar a fazer-lo mais sensível.
Extensão útil Chrome: Esta não é a coisa a ser conhecido antes, mas nós estamos recomendando uma extensão do Chrome útil aqui que vai ajudá-lo muito para trabalhar em capacidade de resposta. Sua extensão chrome janela Resize que vai ajudar você a redimensionar a janela do navegador com o tamanho de diferentes telas de dispositivos. Eu recomendo para trabalhar em todos os tamanhos de tela que é listado nesta extensão.
Como fazer Template Blogger Responsive?
Então, é hora de aprender a capacidade de resposta e nós vamos ter um monte de tempo de você, porque nós vamos fazer este guia enquanto pudermos. Vamos começar isso.
Como você sabe que web design responsivo pode ser feita usando apenas CSS e há uma tag especial no CSS que podemos usar para a capacidade de resposta. Você pode usar o Media Queries (media) e apenas a sua simples , se você sabe CSS muito bem. Estas consultas de mídia age como JavaScript e também condicionais Etiquetas nas Blogger. Fazemos muitas tags consulta de mídia para cada tamanho de tela do dispositivo e colocar conteúdo CSS nele. O conteúdo CSS que será adicionado na estas tags consulta de mídia só funcionará no tamanho de tela especificado.
Adicionando Tag Meta Para Receptividade
Ir para o Blogger Template >> >> Backup seu Template
Clique em Editar HTML >> Pesquisa Por <head>
Cole o seguinte código abaixo dela.
Salve!
--------------------------------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
---------------------------------------
Não há nada de muito difícil com esta meta tag viewport. Você só tem que adicioná-lo abaixo de sua <head> e ele vai começar a trabalhar.
Trabalhar com mídia Queries
Ok! Então, eu tenho preparado o código de consultas de mídia simples, com diferentes tamanhos de tela em que você deve trabalhar.
-----------------
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
Como o código é escrito. É simples. Acrescentando o tamanho da tela (max-width: 1280px) e suportes onde a CSS será armazenado. Ele simplesmente diz ao navegador que, se o tamanho da tela é menor do que max-width do que aplicar o código entre parênteses. Sim! Se o tamanho da tela será exata max-width ou menos do que ele vai trabalhar até atingir a outra consulta de mídia. Você também pode alterar o tamanho máximo de largura de acordo com o seu próprio.
Algumas Dicas avançadas
Dica # 1: Enquanto você está escrevendo o código para consultas de mídia, tentar especificar elementos da web na maneira que nós estamos mostrando. Você deve usar "em" em vez de "px" para font-size, o preenchimento, a margem etc, use percentual para a definição de colunas e com uso box-sizing, max-width e propriedades min de largura.
Dica # 2: Tentar cobrir todo o projeto em invólucro, fazendo div e dar-lhe diferentes larguras em cada tamanho de tela ou você também pode fazer isso tag body. Por isso, as coisas podem atrapalhar na inicial em diferentes tamanhos de tela, mas os cantos que terminam vai re-size e passam a responder em outras telas.
Dica # 3: Coloque um pouco de margem nos lados esquerdo e direito de todo o body. Por exemplo, se colocarmos margem de 100px na tela da mídia de 768px do que o projeto será sensível até o 668px de tamanho de tela.
Dica # 4: Ao fazer o menu de navegação, tente colocar etiqueta 3 alinhado botão clicável com ele para os tamanhos de tela pequena como móvel que mostra o menu de navegação depois de clicar no botão. Se você não pode fazer isso do que tentar adicionar tags de classe em cada item da lista, mas não cair baixos e esconder os itens da lista em diferentes tamanhos de tela, onde não são ideais, chamando com classe.
Dica # 5: Continue fazendo prática com ele .Você também pode obter alguns projetos web responsivos e estudá-los para aprender fazendo template blogger responsivo.
Ou é template blogger ou qualquer outro modelo de web, geralmente podemos chamá-lo de "Responsive Web Design". Deixe-me descrever em palavras simples e comuns, capacidade de resposta é uma característica do tema web que permite que o projeto para caber em qualquer tamanho de tela. No mundo de hoje, a tecnologia, as pessoas usam diferentes dispositivos como laptop, tablet, celular para navegar na internet, que têm diferentes tamanhos de tela e os nossos temas web deve ser otimizado para todos os tamanhos de tela para ajustar automaticamente em qualquer dispositivo para que os usuários não venham a enfrentar qualquer problema enquanto navega no nosso blog ou site.
Há várias razões para fazer o nosso blog temas responsivo, o primeiro e simples, que melhora a interface do usuário, ele pode aumentar seu trafego tablet e usuários móveis e também pode gerar mais dinheiro com ele se exibir anúncios sensíveis que podem aparecer em qualquer tamanho de tela .
Coisas para saber antes
Antes de iniciar o tutorial, deixe-me saber, ou você vai ser capaz de transformar a capacidade de resposta em seu modelo blogueiro ou não.
CSS Habilidade: Você tem habilidade em css? Sim? Otimo! Trazendo a capacidade de resposta a template blogger é todo o trabalho CSS e se você tiver a habilidade nela que você pode não enfrentar qualquer problema nisso.
Estrutura modelo: Você conhece a estrutura do seu template blogger? Se o modelo é projetado por você do que você deve saber como você embrulhou o cabeçalho, conteúdo e outras seções. Ao fazer template blogger ágil, vamos jogar com cada elemento HTML e para isso temos que saber como o modelo está estruturado. Se o modelo não foi projetado por você do que você pode dar uma olhada em sua estrutura e estudá-lo do que você pode continuar a fazer-lo mais sensível.
Extensão útil Chrome: Esta não é a coisa a ser conhecido antes, mas nós estamos recomendando uma extensão do Chrome útil aqui que vai ajudá-lo muito para trabalhar em capacidade de resposta. Sua extensão chrome janela Resize que vai ajudar você a redimensionar a janela do navegador com o tamanho de diferentes telas de dispositivos. Eu recomendo para trabalhar em todos os tamanhos de tela que é listado nesta extensão.
Como fazer Template Blogger Responsive?
Então, é hora de aprender a capacidade de resposta e nós vamos ter um monte de tempo de você, porque nós vamos fazer este guia enquanto pudermos. Vamos começar isso.
Como você sabe que web design responsivo pode ser feita usando apenas CSS e há uma tag especial no CSS que podemos usar para a capacidade de resposta. Você pode usar o Media Queries (media) e apenas a sua simples , se você sabe CSS muito bem. Estas consultas de mídia age como JavaScript e também condicionais Etiquetas nas Blogger. Fazemos muitas tags consulta de mídia para cada tamanho de tela do dispositivo e colocar conteúdo CSS nele. O conteúdo CSS que será adicionado na estas tags consulta de mídia só funcionará no tamanho de tela especificado.
Adicionando Tag Meta Para Receptividade
Ir para o Blogger Template >> >> Backup seu Template
Clique em Editar HTML >> Pesquisa Por <head>
Cole o seguinte código abaixo dela.
Salve!
--------------------------------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
---------------------------------------
Não há nada de muito difícil com esta meta tag viewport. Você só tem que adicioná-lo abaixo de sua <head> e ele vai começar a trabalhar.
Trabalhar com mídia Queries
Ok! Então, eu tenho preparado o código de consultas de mídia simples, com diferentes tamanhos de tela em que você deve trabalhar.
-----------------
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
Como o código é escrito. É simples. Acrescentando o tamanho da tela (max-width: 1280px) e suportes onde a CSS será armazenado. Ele simplesmente diz ao navegador que, se o tamanho da tela é menor do que max-width do que aplicar o código entre parênteses. Sim! Se o tamanho da tela será exata max-width ou menos do que ele vai trabalhar até atingir a outra consulta de mídia. Você também pode alterar o tamanho máximo de largura de acordo com o seu próprio.
Algumas Dicas avançadas
Dica # 1: Enquanto você está escrevendo o código para consultas de mídia, tentar especificar elementos da web na maneira que nós estamos mostrando. Você deve usar "em" em vez de "px" para font-size, o preenchimento, a margem etc, use percentual para a definição de colunas e com uso box-sizing, max-width e propriedades min de largura.
Dica # 2: Tentar cobrir todo o projeto em invólucro, fazendo div e dar-lhe diferentes larguras em cada tamanho de tela ou você também pode fazer isso tag body. Por isso, as coisas podem atrapalhar na inicial em diferentes tamanhos de tela, mas os cantos que terminam vai re-size e passam a responder em outras telas.
Dica # 3: Coloque um pouco de margem nos lados esquerdo e direito de todo o body. Por exemplo, se colocarmos margem de 100px na tela da mídia de 768px do que o projeto será sensível até o 668px de tamanho de tela.
Dica # 4: Ao fazer o menu de navegação, tente colocar etiqueta 3 alinhado botão clicável com ele para os tamanhos de tela pequena como móvel que mostra o menu de navegação depois de clicar no botão. Se você não pode fazer isso do que tentar adicionar tags de classe em cada item da lista, mas não cair baixos e esconder os itens da lista em diferentes tamanhos de tela, onde não são ideais, chamando com classe.
Dica # 5: Continue fazendo prática com ele .Você também pode obter alguns projetos web responsivos e estudá-los para aprender fazendo template blogger responsivo.
Considerações
É assim que nós podemos fazer template blogger responsivo e nós esperamos que este guia completo não vai deixar você enfrentar qualquer problema, mas você pegá-los, comente abaixo e vamos discutir!
