Guida nell’usare le mediaqueries per ridimensionare i nostri siti internet [ css3 ]

16 maggio 2011

Uno degli ultimi problemi che avviene durante la realizzazione di un sito internet è renderlo adattabile per tante tipologie di dispositivi che hanno diverse risoluzioni video.

Nella fattispecie parliamo di dispositivi mobile come iphone e smartphone , e dispositivi touch di medie dimensioni come i tablet. Grazie ai css3 è possibile utilizzare le @mediaqueries che ci permettono di modificare le dimensioni del nostro layout a seconda della risoluzione video del browser.

Per rendere subito l’idea ho creato questa demo che, ridimensionando il nostro browser, ci darà un layout fluido adattabile alle nostre esigenze.

DEMO 1

Per capire come abbiamo realizzato questo tipo di layout qua troviamo il codice html e quello css

HTML

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

<!doctype HTML>
<html lang='it'>
<head>

<title>Layout con MediaQueries</title>

<link rel="stylesheet" href="stile.css" type="text/css">

<link rel="stylesheet" href="media.css" type="text/css">

</head>

<body>

<header></header>

<nav></nav>

<div class='container'>

<section></section>

<aside></aside>

</div>

<footer></footer>

</body>

</html>

CSS Base

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

/* foglio di stile uno */

body {
background: #cc0000;
}

header , nav , section , aside , footer {

border-radius: 20px;
background: #ffffff;

}

header { height: 100px; }

nav { height: 35px; }

section { height: 600px; }

aside { height: 300px; }

footer { height: 40px; }

div.container {

margin: 0px auto;
padding: 0px;

}

Css media queries

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

/* +++++++++++++++++++++++++++++++++++++++++++++++++

risoluzione 980 pixel dispositivi desktop

+++++++++++++++++++++++++++++++++++++++++++++++++ */

@media screen and (max-width: 1600px) {

header , nav, footer {

width: 900px;
margin: 10px auto;
padding: 0px;
clear: both;

}

div.container {

width: 900px;

}

section {

width: 630px;
margin: 10px auto;
padding: 0px;
float: left;

}

aside {

width: 230px;
margin: 10px auto;
padding: 0px;
float: right;

}

}

/* +++++++++++++++++++++++++++++++++++++++++++++++++

risoluzione 650 pixel dispositivi tablet

+++++++++++++++++++++++++++++++++++++++++++++++++ */

@media screen and (max-width: 650px) {

header , nav, footer {

width: 630px;
margin: 10px auto;
padding: 0px;

}

div.container {

width: 650px;

}

section {

width: 630px;
margin: 10px auto;
padding: 0px;
clear: both;

}

aside {

width: 630px;
margin: 10px auto;
padding: 0px;
float: left;

}

}

/* +++++++++++++++++++++++++++++++++++++++++++++++++

risoluzione 480 pixel dispositivi smartphone e iphone

+++++++++++++++++++++++++++++++++++++++++++++++++ */

@media screen and (max-width: 480px) {

header , nav, footer {

width: 460px;
margin: 10px auto;
padding: 0px;

}

div.container {

width: 480px;

}

section {

width: 460px;
margin: 10px auto;
padding: 0px;
clear: both;

}

aside {

width: 460px;
margin: 10px auto;
padding: 0px;
clear: both;

}

}

Per realizzare un layout del genere vi consiglio di:

- Dividere il foglio di stile in due file, uno per gli stili e l’altro per le media queries;
- Nel file per gli stili inserire tutto tranne tutto ciò che influenza il box model escluso height;
- Nel file per le media queries inserire width, paddig e margin e possibili float e position;
- Crea un div contenitore per i tag fluttanti da poter ridimensionare in base alla risoluzione;
- Considerare sempre il padding all’interno di ogni elemento ridimensionato.

Qua trovate un altro esempio più strutturato che rende meglio l’idea.

DEMO 2

Ultima cosa che ho notato è stato il fatto che se il layout è impostato con dei valori fluidi è molto più flessibile di quello con dimensioni fisse ( questo cambiamento lo consiglio se si vuole rendere accessibile su tutti i dispositivi anche i più bizzarri ).

In più se voleste utilizzare le mediaqueries su Browser obsoleti o che non supportano css3 al 100% , vi consiglio questa utilissima libreria in js, che farà per voi il lavoro sporco:

1
2
3

Vi è piaciuto l’articolo? Avete qualche domanda particolare o qualche dubbio? Non esitare a scrivere un commento

Potresti trovare interessante anche

ottimizziamo i css con poche righe di php

Pubblicato in Browser, css3, web design |

Guida nell’usare le mediaqueries per ridimensionare i nostri siti internet [ css3 ]

Potresti trovare interessante anche

Iscriviti alla newsletter

18 commenti per Guida nell’usare le mediaqueries per ridimensionare i nostri siti internet [ css3 ]

Lascia un Commento