COMO CONVERTER UM SITE EM UM SITE RESPONSIVO
Esse post tem como objetivo jogar uma luz sobre layouts responsivos. Antigamente, a principal dificuldade enfrentada por um desenvolvedor web era fazer o site renderizar da mesma forma em todos os navegadores. Isso não seria uma tarefa tão árdua não fosse pelo nosso “querido amigo” Internet Explorer.

Hoje em dia esse cenário já melhorou bastante neste aspecto. O IE 9 ainda dá trabalho mas bem menos que seus antecessores. Só que agora temos que enfrentar um novo desafio: A infinidade de tamanhos e resoluções de tela existentes nos dispositivos mobile. Por dispositivos mobile, leia-se, celulares, smartphones e tablets.

Com o crescimento da utilização destes dispositivos com acesso à …exibir mais conteúdo…

É como programação, veja o código abaixo:

1
2
3
4
5
6
7
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { background: red;
}
}
Com isso estou dizendo: SE (é um dipositivo de tela) E (sua largura está entre 320 e 480), o terá um background vermelho.

O site csstricks.com nos deu esse fantástico snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {