Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
¿En qué consiste hacer una página web responsive?
Hacer una página web responsive implica muchas cosas. Lo que está claro, es que una página web responsive no es simplemente hacer la web más pequeña para que quepa en un dispositivo móvil sin tener que hacer zoom.
En general, cuando queremos que una web se adapte al móvil, una de las tareas fundamentales que vamos a hacer es colocar las cosas que antes estaban en horizontal, en vertical. Tiene sentido, porque si en una web que vemos en el ordenador tenemos cuatro columnas de datos, si luego queremos pasar esas cuatro columnas al teléfono móvil, nos encontraremos en que para que quepan en horizontal apenas tenemos espacio. Deberíamos reducir mucho el ancho de las columnas. ¿Qué hacemos entonces?. Colocamos las columnas en vertical. De esta forma, cada columna ocupará el 100% del ancho del teléfono, en lugar del 25% de una pantalla que ya de por sí era bastante pequeña.
Por supuesto hay muchas más cosas que se pueden hacer, como transformar el menú de navegación en una hamburguesa clickable, hacer desaparecer los sliders u otros elementos que impliquen unos tiempos de carga y una tasa de transferencia de datos mayor (no queremos dejar si tarifa de datos a los usuarios de nuestra web), o reubicar algunos componentes
Consiste en diseñar tu contenido de forma que responda correctamente independientemente del entorno en que se vaya a mostrar.
Podemos lograr este objetivo utilizando media queries.
En general hay dos aproximaciones:
- Cargar diferentes hojas de estilos en función del tamaño de la pantalla. Esto obviamente implica además de modificar las hojas de estilo que creas, modificar el html desde el que las cargas. Así es como yo he resuelto este ejercicio en el videotutorial.
- Dentro de una hoja de estilos, cargar unos estilos u otros en función del tamaño de la pantalla. Profesionalmente, esta es la forma en que habitualmente trabajo. Como muy a menudo tengo que modificar un WordPress, para cargar diferentes hojas de estilos dentro de WordPress tengo que invertir más tiempo que para modificar los estilos, y por eso siempre utilizo esta segunda opción.
Media Queries cargando hojas de estilos diferentes
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css"><link rel="stylesheet" type="text/css" href="css/largeLayout.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/mediumLayout.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/smallLayout.css">Ojo! Tener en cuenta que si utilizo estilos en la cabecera o estilos en línea en la página web sobreescribirán los de las hojas de estilos usados en las media queries.
Media Queries dentro de una hoja de estilos
@media (max-width:480px) {
#col_left {
width: 100px;
}
}Ejercicios Media queries
Ejercicio media queries – Mobile First
Ejercicio media queries – Desktop First
Utilizando los recursos del zip ‘Ejercicio propuesto’, hacer el ejercicio ‘Página responsive’ utilizando media queries dentro de la hoja de estilos.
Ejercicio impresora – hacer una página responsive
Mostrar un mensaje cuando el dispositivo tiene orientación portrait
#warning-message {display:none}
@media only screen and (orientation:portrait){
#wrapper {display:none}
#warning-message {display:block;background-image:url(../img/portada_vert_cast.jpg);background-size:100% 100%;width:100%;height:70%;padding:54% 0 0 1%}
#warning-message span {display:block;background-color:#000;padding:5% 5%;opacity:0.6;color:#FFF;font-size:2.8em;text-align:center;border-radius:20px;width:87%}
}
@media only screen and (orientation:landscape){
#warning-message {display:none}
}