html Template Responsivo

[Juliana~* 26]

Nada melhor que um site responsivo não é mesmo?

 

E se você não sabe o que isso significa é basicamente:

Uma única pagina HTML adaptável para todo e qualquer tamanho de tela. O site responsivo ele tem uma condição, o site deve se adaptar conforme vc diminua ou aumente o tamanho da tela, se precisar de um reloud para se adaptar já não é mais responsivo.

Um excelente exemplo é a WebCheats, o Youtube, 4Shared entre vários outros. Se você ficar diminuindo ou aumentando a tela, os elementos vão se adaptando automaticamente. Isso é muito vantajoso.

 

No desenvolvimento de uma pagina responsiva temos de trocar os acostumado 'px' por 'em' e '%'. A '%' porcetagem é adaptavel em relação ao tamanho total do elemento pai e o 'em' é relativo a '%' do elemento pai, já o 'px' é um valor fixo. Não existe nenhum segredo.

 

Por exemplo tenho um elemento pai, o filho e o neto. Para ele se adaptar ficar assim:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

A estilização ficaria assim:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Para converter o 'px' em 'em' basta dividir por 16

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

ou

 

EM = PX / 16

 

E o site será adaptável, é fácil basta estudar... e por isso fiz um exemplo bacana para estudos:

 

index.html

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

style.css

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Uma réplica muito feia da WC kkkk

 

 

UPDATE

[spoiler=Menu Responsivo]index.html

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

{...}

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

{...}

 

style.css

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

ready.js

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se