Adattare sito web per ogni risoluzione con css e javascript

20 aprile 2011

In vista della dell’uscita del nuovo template di Ebug, sto lavorando a non finire su questo progetto.

Una delle tante problematiche che mi sono trovato a gestire è quello della risoluzione dello schermo, visto la miriade di dispositivi che mi guardano ( iphone, ipad, schermi ultra giganti da 1824px per 960px ) e ho dovuto interagire con tali hardware in maniera tale da rendere il layout il più fluido possibile.

Per fare ciò ho provato diverse tecniche e le due che mi sono più piaciute sono: media queries di css3 e librerie come adaptive.js .
Ambedue le soluzioni sono buone e elastiche , in quanto vi ritrovate a gestire un layout che si ridimensiona in poche righe di codice.

Se volete usare le media queries di css3 questo è il codice ( qua invece trovate la fonte ufficiale ):

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

/* 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) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Se invece volte utilizzare una libreria come adaptive.js qua trovare il codice ( qua trovate la fonte ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Edit to suit your needs.
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',

// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,

// First range entry is the minimum.
// Last range entry is the maximum.
// Should have at least one "to" range.
range: [
'760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px to 1600px = 1200.css',
'1600px to 1920px = 1560.css',
'1920px = fluid.css'
]
};

E voi quale soluzione preferite ? Dite la vostra con un commento

Potresti trovare interessante anche

La risoluzione giusta per un progetto da webdesigner

Pubblicato in css, css3, javascript |

Adattare sito web per ogni risoluzione con css e javascript

Potresti trovare interessante anche

Iscriviti alla newsletter

18 commenti per Adattare sito web per ogni risoluzione con css e javascript

Lascia un Commento