Design Responsivo em 3 passos

responsivo

Seguindo artigos sobre Design Responsivo, você vai aprender a criar um layout responsivo básico em 3 passos.

– Passo 1: A meta tag “viewport”
– Passo 2: A estrutura HTML
– Passo 3: As media queries

Veja o demo.

A meta tag “viewport”

O viewport é a área onde o seu website aparece.
A meta tag viewport pode ser usada para controlar como o conteúdo HTML irá aparecer nos dispositivos móveis e também serve para controlar o zoom.

A maioria dos navegadores de celular dimensionam as páginas HTML para a largura do viewport, fazendo assim com que se encaixem proporcionalmente à tela. Usando a meta tag viewport você consegue redefinir isso.

A meta tag viewport, abaixo diz ao navegador para usar como largura do layout, a largura do viewport, desativando a escala inicial.
Vamos incluir este código dentro da tag

 

 

 


A estrutura HTML

Em nosso exemplo, nós podemos ver um layout de página básico, com cabeçalho, conteúdo, barra lateral e rodapé. O cabeçalho tem uma altura fixa de 180px, o conteúdo tem uma largura de 600px, a barra lateral tem 300px de largura.

As media queries

Aqui é onde a mágica acontece. As media queries são uma forma de enviar condições ao navegador para informá-lo como renderizar a página, dependendo do tamanho do viewport.

O conjunto de regras abaixo, irão funcionar quando a largura do viewport for 980px ou inferior. Basicamente vamos passar a largura da <div> “content” de pixels para porcentagem, transformando a largura do elemento em fluída.


 

Fonte desse conteúdo apresentado ” Wpmidia Web “

Leia todo conteúdo Tudo sobre WordPress no site Wpmidia Web

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *