Mais Populares

24 de setembro de 2014

Site responsivo

Para você criar um site responsivo, basta você criar um layout diferenciado, inovador e o principal: sem fixar pixels de largura.

O principal conceito no responsivo é que ele venha funcionar como um site para qualquer dispositivo e qualquer tela que o for visualizar.

Mas como estabelecer um layout responsivo sem fixar pixels?

Você não precisa ficar se matando na calculadora para saber onde ficará determinado item, basta que as classes do css façam todo o trabalho para você.



O principal é entender como funciona a porcentagem, e ter em mente como deve fazer.

1. Layout com porcentagem

Tendo em mente que irá trabalhar com porcentagens, não é nada ideal ficar calculando. O ideal é você criar sua regra para que consiga criar um layout interessante.

Vamos começar com uma contabilização por colunas, em geral para sites talvez o máximo seja de 4 colunas, ou se for para interfaces de sistemas, pela quantidade de recursos provavelmente 12 colunas sejam o suficientes (12 colunas utilizado pelo bootstrap).

Vamos para ficar bem simples, com apenas quatro colunas como acima:

/* css */
.coluna-1, .coluna-2, .coluna-3, .coluna-4 {float:left;}
.coluna-1 {width:100%; border:1px solid red;}
.coluna-2 {width:50%}
.coluna-3 {width:33.332%}
.coluna-4 {width:25%}
.clear {clear:both;}

<!-- html -->
<div class="coluna-1">
<div class="coluna-4">
</div>
<div class="coluna-4">
</div>
<div class="coluna-4">
</div>
<div class="coluna-4">
</div>
</div>

2. Media Query

Através desta forma, as colunas estão sempre alinhadas para ficar centralizadas e todo conteúdo interno poderá ser editado e será automaticamente redimencionado para o dispositivo necessário.

Um item essencial no responsivo com HTML5 é o poder de configurar para cada tipo de tela um determinado item de aparecer ou não. Isto se faz com Media Query, disponível apenas no CSS 3.

Em qualquer arquivo CSS, coloque a seguinte linha:

/* css */
/* dispositivos com tela com tamanho mínimo de 320px e orientação de rotação */
@media screen and ( min-width: 320px ) and ( orientation: portrait ) { /* seu CSS aqui */ }
@media screen and ( min-width: 320px ) and ( orientation: landscape ) { }
/* dispositivos com tamanho máximo de 700px */
@media screen and ( max-width: 700px ) { }
/* página de impressão. sempre é bom adaptar uma versão para que seja possível imprimir o site e exibir o conteúdo principal que o usuário deseja */
@media print {}

Um dos problemas de novos dispositivos Android de alta densidade de pixels, é que neste método, sempre irá aparecer a versão completa do site, mesmo em um dispositivo com uma tela pequena, como caso do Samsung Galaxy S4, Galaxy Note 3, Sony Xperia Z, Nexus 5, dentre outros.

Uma solução é usar o seguinte:

/* css*/
@media screen and  ( -webkit-min-device-pixel-ratio: 1.0 ) {   } /* Ex.: iPhone 3G(S) */
@media screen and  ( -webkit-min-device-pixel-ratio: 1.3 ) {   } /* Ex.: Nexus 7 */
@media screen and  ( -webkit-min-device-pixel-ratio: 1.5 ) {   } /* Ex.: Samsung Galaxy S II*/
@media screen and  ( -webkit-min-device-pixel-ratio: 2.0 ) {   } /* Ex.: iPhone 4, 4S, 5, 5c, 6, Samsung Galaxy S III */
@media screen and  ( -webkit-min-device-pixel-ratio: 3.0 ) {   } /* Ex.: Nexus 5, Samsung S4, Note 3, iPhone 6 Plus */

Um exemplo em:
http://jsfiddle.net/ario_2025/waufrpjz/2/ (pode ver alterar lidando com o zoom do seu navegador).

Mais exemplos de dispositivos em:
http://bjango.com/articles/min-device-pixel-ratio/



Um comentário :

  1. Ótimo artigo pois simplifica bem para quem quer começar a editar sites responsivos como eu, ao invés de só ficar limitado a templates prontos Html5, apesar de que isso vai dar mais trab e levar mais tempo. Parabéns pelo artigo novamente !

    ResponderExcluir

Deixe seu comentário abaixo e curta Tutorial TI no facebook!