Plantilla de css per crear webs amb disseny adaptatiu.

Recentment, i cada vegada mes, em demanen que les webs que desenvolupo s’ajustin a la mida de les pantalles, en comptes d’usar una mida per defecte com es solia fer fins ara (Perquè ens entenguem, cada vegada mes, les empreses demanden que el disseny de les seves planes webs tinguin el ja tan famós disseny adaptatiu).

Per poder realitzar aixo, fins ara lo que es feia era posar les alçades i amplades en percentatge en comptes de posar-lo en pixels per a que el contingut s’adaptara a la mida de la pantalla (encara que tot i aixi, la majoria de les vegades, l’efecte obtingut no era, ni de lluny, l’esperat) però ara, amb css3 i les media queries es possible ajustar mes les webs a les mides de les pantalles.

Per aconseguir aixo, nomes tenim que afegir el seguen codi a la nostra fulla d’estils:

1
2
3
@media all and (max-width : 320px) {
    /* Codi css que es executara quan la pantalla tingui una resolució menor o igual a 320px */
}

Amb aquesta regla de css, aconseguim que totes les pantalles que tinguin una resolució menor o igual a 320px (molts dels telèfons intel·ligents del mercat usen aquesta mida) se li apliqui les regles de css que l’indiquem en aquest bloc.

Realment es poden fer moltes discriminacions utilitzant media queries (orientació de la pantalla, si es una pantalla d’ordinador o una smart tv,…) i cada vegada surten mes per lo que recomano visitar de tan en tan la web de la w3c on es van publicant les noves queries que es van desenvolupant.

Arribat fins aquí, segurament et preguntaràs si existeix cap remei miraculós per poder contemplar totes les resolucions de tots els dispositius amb connexió a Internet (telèfons mòbils, tauletes, smart tv, neveres, rentadores,…) que no paren de sortir e invadir el mercat. Desgraciadament no existeix cap llistat que tingui totes les resolucions (encara que poc a poc, van apareixent llistats incomplets).

De moment, i per si us serveis d’ajuda, us deixo una plantilla que faig servir i que avarca una gran varietat de resolucions de dispositius. Òbviament es pot ampliar o reduir a gust, segons les necessitats dels vostres clients. Recordar que l’orde en que s’indiquen les media queries es important ja que sempre s’aplicara l’ultim patró que coincideixi amb la resolució del navegador que estigui executant el css.

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
/* Pantalles de gran resolució ----------- */
@media all and (max-width : 1824px) {
 
}
 
/* PCs d'escriptori i portàtils ----------- */
@media all and (max-width : 1370px) {
 
}
 
/* Tauletes (Vertical i Horitzontal) ----------- */
@media all
and (min-width : 768px) 
and (max-width : 1024px) {
 
}
 
/* Tauletes (Horitzontal) ----------- */
@media all and (max-width : 800px) {
 
}
 
/* Petites Tauletes (Vertical i Horitzontal) ----------- */
@media all
and (min-width : 600px) 
and (max-width : 800px) {
 
}
 
/* Petites Tauletes ( Apaïsat o Horitzontal) i Tauletes (Vertical) ----------- */
@media all and (max-width : 750px) {
 
}
 
/* Smartphones ( Apaïsat o Horitzontal) ----------- */
@media all and (max-width : 640px) {
 
}
 
/* Petites Tauletes (Vertical) ----------- */
@media all and (max-width : 600px) {
 
}
 
/* Smartphones (Vertical i Horitzontal) ----------- */
@media all 
and (min-width : 320px) 
and (max-width : 480px) {
 
}
 
/* Smartphones (Vertical) ----------- */
@media all and (max-width : 480px) {
 
}
 
/* Petits Smartphones (Apaïsat o Horitzontal) ----------- */
@media all and (max-width : 430px) {
 
}
 
/* Smartphones (Vertical) ----------- */
@media all and (max-width : 375px) {
 
}
 
/* Petits Smartphones (Vertical) ----------- */
@media all and (max-width : 320px) {
 
}

Deixa un comentari

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *