El uso de dispositivos móviles está creciendo a un ritmo increíble, dispositivos como tablets y smartphones han incrementado sus ventas en los últimos años y la navegación en Internet
mediante estos dispositivos es cada vez más común. Ese es el motivo por el que el diseño web adaptativo se ha vuelto tan popular, pues es una técnica que proporciona una solución web que
puede manejar la visualización web tanto de escritorio como de dispositivos.
Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos mó-
viles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.
“media queries”
Mediante la regla @media podemos condicionar las propiedades que se utilizaran en la página mediante el tamaño, resolución, orientación o incluso el medio sobre el cual se visualizara nuestro contendio.
Las opciones principales son:
Aspect-ratio: Mira las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo.
Width y height: Mira las dimensiones del área de visualización. Además pueden ser expresadas en valores mínimos y máximos.
Orientation: Mira si el layout es panorámico ( el ancho es mayor que el alto ) o vertical ( el alto es mayor que el ancho ). Esto nos permite ajustar los diseños para dispositivos con propiedades de giro de la pantalla como el iPhone, y otros smartphones y los tablets.
Resolution: Mira la densidad de los pixeles en el dispositivo de salida. Esto es especialmente útil cuando queremos aprovecharnos de las ventajas de los dispositivos que tiene una resolu-
ción mayor a 72 dpi.
Color, Color-index y monochrome: Encuentran el número de color o bits por color. Esto nos permite crear diseños específicos para dispositivos monocromáticos.
Para entender esto mejor vamos a hacer un caso practico para entenderlo mejor. Para ello vamos a realizar una pagina que se adapte al tamaño de la pantalla donde la tenemos abierta.
El documento Html tendría la estructura que hemos aplicado hasta ahora, aunque siempre debemos tener en cuenta que se tratara de una web adaptable y tenemos que tener cuidado de lo que metemos en ella.
<
|
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 |
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="stilos.css" /> </head> <body> <div id="contenedor"> <header> </header> <nav> <ul> <li><a href="#">Boton 1</a> <li><a href="#">Boton 2</a> <li><a href="#">Boton 3</a> <li><a href="#">Boton 4</a> </ul> </nav> <section> <h2>Section</h2> <p> </p> </section> <aside> <h3>Aside</h3> <p> </p> <p> </p> </aside> <footer> <h4>Footer</h4> </footer> </div> </body> </html> |
En este caso solo he metido unos párrafos vacíos para darle algo de cuerpo a la pagina.
Lo primero es poner como hacíamos antes los estilos comunes, es decir, las reglas que no dependen del cambio de tamaño de nuestro explorador.
|
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 |
*{ padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; } /* comunes */ #contenedor{ border:1px solid #CCC; padding: 5px; width: 960px; margin: 20px auto; } header{ height: 180px; border:1px solid #CCC; } nav{ width: 100%; border:1px solid #CCC; overflow: hidden; } nav ul{ list-style: none; } nav ul li{ float: left; width: 25%; } nav ul li a{ background: #006; color:white; display: block; text-align: center; padding-top: 5px; padding-bottom: 5px; text-decoration: none; } nav ul li a:hover{ background: #903; } section{ border:1px solid #CCC; width: 600px; float: left; } aside{ width: 300px; float: right; } footer{ border:1px solid #CCC; clear: both; } |
Algunas de estas reglas las “pisaremos“ en las media queris según las necesidades, por eso es importante que las reglas de estilo comunes estén en la parte alta del código de nuestra
página.
Lo siguiente es aplicar las media queris, en este caso indicándole a partir de que tamaño se el que se aplicaran las reglas.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media screen and (max-width: 980px) { #contenedor { width: 94%; } section { width: 65%; } aside { width: 30%; } } |
Cuando la página tiene mas de 980px, le aplica esos estilos a cada selector, se puede usar cualquier tipo de unidad de medida, %, px, em…, Aunque si el diseño lo permite es aconsejable usar % para que se adapte a cualquier medida.
Ahora nos ocuparemos de la siguiente medida, que vamos a poner pensando en las tableta en posición vertical de 700px.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media screen and (max-width: 700px) { section { width: auto; float: none; } aside { width: auto; float: none; } } |
En este caso le hemos quitado la propiedad de flotación al ponerlo en none, lo que hace que se ponga una encima de otra, y el tamaño en auto para que se adapte al contenido.
Por último vamos a realizar la adaptación a los móviles y le ponemos que la anchura máxima para aplicar estas reglas sera 480px.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@media screen and (max-width: 480px) { header { display: none; } h1 { font-size: 24px; } aside { display: none; } section{ width: 100%; } nav ul li{ float: none; width: 100%; } } |
En este caso es interesante ver como hacemos desaparecer el aside con la regla display con valor none.