Plantilla de css para crear webs con diseño adaptativo

Recientemente me piden cada vez más, que las webs se ajusten al tamaño de la pantalla en vez de usar un tamaño por defecto como se solía utilizar hasta ahora (Para que nos entendamos, cada vez las empresas solicitan más que el diseño de sus paginas webs tengan el famoso diseño web adaptativo).

Para poder realizar esto, hasta ahora se solían especificar las alturas y anchuras en porcentaje en vez de en pixeles para que el contenido se ajuste al tamaño de la pantalla (aunque no siempre se conseguía el efecto deseado) pero ahora, con css3 y sus media queries es posible ajustar más las webs a los tamaños.

Para conseguir esto, solo tenemos que añadir el siguiente código a nuestra hoja de estilos.

1
2
3
@media all and (max-width : 320px) {
    /* Codigo css que se ejecutara cuando la pantalla tenga una resolución menor o igual a 320px */
}

Con esta regla de css, conseguiremos que todas las pantallas con una resolución menor o igual a 320px (muchos de los smartphones usan esta resolución) se le apliquen las reglas de css que le indiquemos.

Realmente se pueden hacer muchas discriminaciones usando media queries (orientación de la pantalla, si es una pantalla de ordenador o una smart tv, … ) y cada vez van saliendo más por lo que recomiendo visitar de tanto en cuando la web de la w3c que va publicando las nuevas queries que se van desarollando.

Llegado a este punto, seguramente os estaréis preguntado si existe un remedio milagroso para poder contemplar todas las resoluciones de todos los dispositivos con conexión a Internet (móviles, tabletas, smart tv, neveras, lavadoras, … ) que no paran de salir e invadir el mercado. Desgraciadamente no hay un listado con todas las resoluciones (aunque poco a poco van apareciendo algunos listados incompletos ).

De momento, y por si os sirve de ayuda, aquí os dejo el que uso yo para abarcar una gran mayoría de resoluciones de dispositivos. Obviamente se puede ampliar o reducir a gusto, según sean las necesidades de vuestros clientes. Recordar que el orden en que se indican las media queries es importante ya que se aplicara el último patrón que coincida con la resolución del navegador que este ejecutando 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
/* Pantallas de gran resolución ----------- */
@media all and (max-width : 1824px) {
 
}
 
/* PCs de escritorio y portátiles ----------- */
@media all and (max-width : 1370px) {
 
}
 
/* Tabletas (Vertical y Horizontal) ----------- */
@media all
and (min-width : 768px) 
and (max-width : 1024px) {
 
}
 
/* Tabletas (Horizontal) ----------- */
@media all and (max-width : 800px) {
 
}
 
/* Pequeñas Tabletas (Vertical y Horizontal) ----------- */
@media all
and (min-width : 600px) 
and (max-width : 800px) {
 
}
 
/* Pequeñas Tabletas (Apaisado o Horizontal) y Tabletas (Vertical) ----------- */
@media all and (max-width : 750px) {
 
}
 
/* Smartphones (Apaisado o Horizontal) ----------- */
@media all and (max-width : 640px) {
 
}
 
/* Pequeñas Tabletas (Vertical) ----------- */
@media all and (max-width : 600px) {
 
}
 
/* Smartphones (Vertical y Horizontal) ----------- */
@media all 
and (min-width : 320px) 
and (max-width : 480px) {
 
}
 
/* Smartphones (Vertical) ----------- */
@media all and (max-width : 480px) {
 
}
 
/* Pequeños Smartphones (Apaisado o Horizontal) ----------- */
@media all and (max-width : 430px) {
 
}
 
/* Smartphones (Vertical) ----------- */
@media all and (max-width : 375px) {
 
}
 
/* Pequeños Smartphones (Vertical) ----------- */
@media all and (max-width : 320px) {
 
}

Un pensamiento en “Plantilla de css para crear webs con diseño adaptativo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *