Ir para o conteúdo principal

Responsive projeto WordPress com a CSS3 regra @media

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Observando o crescente uso de dispositivos móveis, desde o final de abril do 2015, o Google penaliza sites cujas páginas não estão prontas para dispositivos móveis. Consequentemente, para o seu SEO, você deve garantir que seu site seja exibido decentemente em telas grandes e em telas menores.

Neste artigo, mostrarei como você pode colocar seu site na página usando a regra @media de CSS3.

É importante observar que os termos "responsivo" e "móvel compatível" são frequentemente usados ​​de forma intercambiável, apesar da diferença em seu significado real. É importante entender o que todos querem para garantir que seu site atenda aos critérios necessários para acomodar todos os tamanhos de tela.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog

Então, voltemos ao porquê de estarmos aqui.

Ágil e móvel-Compatible

Sites que não são nem responsivos nem compatível com celular, são exibidos de forma idêntica em todas as telas, ou seja, a versão para telas grandes é exibida em todos os lugares. Em telas menores, você precisa rolar a página horizontalmente para ver todo o seu conteúdo. Eles são difíceis de navegar nessas telas.

Descubra também estes 8 WordPress plugins para personalizar o visual do seu site

Um site é móvel compatível quando respeita apenas o mínimo estritamente visível no celular, o que não o torna um site responsivo. Por exemplo, podemos considerar que um site é compatível com dispositivos móveis se você não precisar navegar horizontalmente. Isso resulta em seus elementos se tornando pequenos e indistinguíveis. Você deve aumentar o zoom para ler o conteúdo.

Do lado deles, os sites responsivo adapte-se perfeitamente a diferentes tamanhos de tela. Eles redefinem seus elementos para que possam ser vistos e usados ​​com facilidade em telas menores. Esse é o tipo de design que você deseja para o seu site.

Veja também nossa 10 WordPress plugins para criar um formulário de reserva em seu site

Agora você sabe a diferença entre responsivo e móvel compatível. Agora vamos ver a regra @media do CSS3, que permite que seu site esteja atualizado para responder ou criar com facilidade temas do WordPress com conteúdo responsivo.

A regra @media de CSS3

Para tornar seu tema responsivo, você precisará da regra @media de CSS3. Basicamente, permite definir os estilos que você deseja usar para um tipo de tela específico. Você o usará como outra regra CSS (com chaves), com a única diferença de que ela se sobrepõe a outras regras CSS.

@ tipo de mídia de mídia (expressão) {selector-css-test {property1: value1; property2: value2; }}

Nesta estrutura, os elementos dentro da regra @ media só funcionam quando o tipo-de-media especificado para ter sido detectado com sucesso. O tipo de mídia escolhido, você pode especificar as características em termos de dimensões.

Discover Como aplicar a interface e a experiência do usuário ao WordPress

A regra @media detecta para você o tipo de tela em que seu site é visitado e escolhe as regras que melhor se adequam a esse tipo de tela. Todos os principais navegadores já incorporaram a regra @media.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Aqui está para sua informação a lista: cromo , safári, Firefox, IE, operar et borda.

Definir as telas de destino

Se você deseja modificar um tema existente do WordPress, faça uma cópia de backup do CSS deste último para poder voltar, se necessário.

Leia também nosso artigo sobre Como carregar gradualmente os comentários do Facebook e Disqus

Como vimos em sua estrutura, para definir o tipo de tela, é necessário encaminhar @media o tipo de tela alvo. Aqui está a lista de diferentes tipos de telas:

- todos : para todos os tipos de telas ou para as dimensões especificadas em expressão
- tela : para todas as telas, seja móvel, tablet, laptop ou desktop
- impressão : para impressoras, se desejar estilos especiais para as páginas que você pode imprimir
- discurso : para leitores de tela, se você deseja estilos para deficientes visuais.

Também existem operadores que você pode colocar antes do tipo de tela; como não exibir estilos para telas de outro tipo que não o especificado, ou apenas para aplicar estilos apenas às telas especificadas. Então você pode ter:

@media única tela

Definir estilos para as dimensões da tela

Você pode usar expressão para esclarecer as características da tela. depois @media entrar e seguido pela expressão. Se você usar várias expressões, elas deverão ser todas separadas por e. Aqui está um exemplo da estrutura:

@media only screen e (max-width: 640px) {selector-css-example {/ * Seu CSS normalmente aqui * /}}

Neste exemplo, eu uso max-width com um valor de 640px. Isso define uma largura máxima de tela do tamanho de um iPhone ou de um pequeno smartphone Android. Com esse tipo de estrutura, você tem controle sobre como o site aparece em diferentes terminais. Aqui está uma lista de propriedades relacionadas às dimensões que você pode usar em expressão :

Descubra também o nosso 8 SEO WordPress plugins para otimizar o SEO do seu site

- mem de largura et max-width : a largura mínima e máxima necessárias para exibir estilos na regra, respectivamente @media. Mais um pixel e estilos não são exibidos.

- mem altura et max-height : a altura mínima e máxima necessárias para exibir os estilos na regra, respectivamente @media. Como a maioria das telas é projetada para desenrolar páginas verticalmente, as propriedades min-altura et max-height são pouco usados.

Aqui está uma lista das dimensões da tela de alguns terminais:

- IPhone: 640px
- IPad: 1024px
- Tablets: 1366px
- Smartphone Android: 640px, 720px, 854px, 960px
- Android extra grande: 1024px, 1066px
- Windows phone: 480
- Windows phone grande: 768px
- antigos e pequenos: 320px
- Ultrabook / Laptops: 1366px
- Desktops e TVs: 1920px

Existem muitas outras propriedades que você pode usar no expressão. Por exemplo, se você estiver direcionando para desktops ou telas de TV que possam exibir imagens no formato 16: 9, poderá usar uma estrutura como esta:

@ media única tela e (min-largura: 1920px) e (razão dispositivo de aspecto 16 / 9) {css-selector do exemplo {/ * O seu CSS habitual aqui * /}}

Para listas e exemplos mais completos, consulte w3schools et Mozilla Developpers.

Teste a funcionalidade responsiva do seu site

À medida que você altera ou cria seu tema WordPress ou no final, se você gosta de surpresas, precisa testar o resultado para ver se ele finalmente responde. Lembre-se de que o Google está assistindo a sites que não respondem.

Veja também estes 10 WordPress plugins para criar abas no seu blog

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Se você não possui todos os dispositivos móveis que você segmenta, existem (felizmente para nossas bolsas de valores) muitas ferramentas para ver como seu site se encaixa nas diferentes telas.

Diretamente no navegador do seu computador você pode usar Janela extensão do navegador Chrome Resizer, ResponsiveResize, ResizeMe ou Firesizer. Abaixo está uma imagem do BlogPasCher no Responsive Design View, que vem por padrão com o Firefox.

css3-media-firefox-responsive-design-view

Existem também sites dedicados à tarefa:

Responsivepx

css3-media-responsivepx

Este site tem a particularidade de permitir que você escolha as dimensões da tela. Esteja ciente de que este site carrega o seu em um quadro. Portanto, se o seu tema WordPress foi projetado para não aparecer em um quadro, é bem possível que ele não seja exibido aqui.

Peek iPad

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-espiada

Este site é interessante para testar seu site nos mais recentes terminais da Apple, IPad e IPhone. Basta digitar seu URL. Observe que está sujeito ao mesmo problema de quadro que o responsivepx.

Emulador de telefone móvel

css3-media-mobile-phone-emulador

Neste site, você pode testar o seu nas telas pequenas e nos modelos antigos de telefone que você seleciona no lado direito da tela. Você também pode configurar algumas propriedades da tela.

Teste de compatibilidade com dispositivos móveis do Google

teste css3-media-google-mobile-friendly

Aqui está um dos testes mais importantes, se não o mais importante. Basta inserir seu endereço na barra e clicar em Analisar para iniciar o teste. Após o teste, a ferramenta exibe um relatório e uma nota. Se o teste for positivo, melhor ainda, você não será penalizado pelo Google.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Se você não é um desenvolvedor, recomendo uma lista de temas responsivos do WordPress para começar.

Recursos Recomendados

Descubra outros recursos recomendados que ajudarão você a conquistar seus parceiros e assinantes, além de melhorar a segurança do seu site.

Conclusão

É isso aí! você sabe tudo o que há para saber sobre como tornar seu site ou seu tema WordPress responsivo usando a regra @media de CSS3. Se perdemos um tema do WordPress que você gosta ou que você prefere, deixe um link na seção Comentários abaixo.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Também convidamos você a compartilhe em suas diferentes redes sociais.

...

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
6 ações
ação6
chilrear
Enregistrer