Hoy, en [forCode], os enseñaremos un ejemplo de Responsive Design. Veremos como actúa una página web según el tamaño de nuestro navegador y como trabajar con distintas CSS en función de ello.
Bueno pues pongámonos manos a la obra:
Primero de todo, crearemos una página en blanco de html.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Una vez tengamos lo anterior, entre los tags <head> y </head>, añadiremos las siguientes líneas:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Con este tag, ajusta automáticamente el ancho de la página y le indica que no tiene que hacer zoom inicialmente.
Siguiendo dentro de los tag <head> y </head>, añadiremos las siguientes líneas para que nuestra página web ponga el estilo que queremos:
<!-- Estilo Normal --> <link rel="stylesheet" href="base.css"> <!-- Responsive --> <link rel="stylesheet" href="responsive.css">
Ahora crearemos y analizaremos las hojas de estilo, vamos a ello!:
Crearemos un fichero .CSS, que lo llamaremos «base.css» (inspirado en el estilo: http://www.csslab.cl/2007/01/12/centrado-vertical-con-css/):
/*
Estilo del box que contiene la información */
html, body {
margin: 0;
height: 100%;
}
body {
font: 100% Arial;
color: black;
}
h1 {
color: #1990D5;
}
#wrap {
display: table;
height: 100%;
}
#caja {
display: table-cell;
vertical-align: middle;
}
#contenido {
padding: 20px;
}
p, #pc, #tablet, #movilPaisado, #movilNormal{
font-size: 17px;
line-height: 150%;
}
Seguidamente, haremos lo mismo que el anterior pero lo llamaremos «responsive.css»:
/*
Ocultamos la parte que queramos
para que no se muestre desde un principio,
en este caso nuestra información */
#pc, #tablet, #movilPaisado, #movilNormal{
display: none;
}
/*
Mostramos la información,
en este caso nuestros divs que contienen un texto
SOLO cuando la pantalla tenga un cierto ancho
A continuación os pongo una lista de las mas comunes:*/
/*
PC */
@media screen and (min-width: 960px) {
#pc{
display: block;
}
}
/*
Tablets */
@media screen and (min-width: 768px) and (max-width: 959px) {
#tablet{
display: block;
}
}
/*
Tablets */
@media screen and (min-width: 480px) and (max-width: 767px) {
#movilPaisado{
display: block;
}
}
/*
Tablets */
@media screen and (min-width: 0px) and (max-width: 479px) {
#movilNormal{
display: block;
}
}
Bien, ahora que ya tenemos nuestras hojas de estilos enlazadas a nuestra página HTML, vamos a construir el body de dicha página HTML, dentro de los tags <body> y </body> añadiremos el siguiente código:
<div id="wrap"> <div id="caja"> <div id="contenido"> <h1>Ajusta la ventana para ver el tipo de resolución que quieras</h1> <div id="pc"> Hola! soy un width para PC min 960px </div> <div id="tablet"> Hola! soy un width para tablets de 768-959px </div> <div id="movilPaisado"> Hola! soy un width para moviles Paisados de 480-767px </div> <div id="movilNormal"> Hola! soy un width para moviles de 0-479px </div> </div> </div> </div>
Si todo ha salido bien, deberíais tener algo semejante a esto (de no ser así, repasad no os hayáis equivocado en algún paso):
Ahora solo tenéis que cambiar el tamaño de vuestro navegador para ver como actúa esta página HTML con Responsive Design. Por si no os sale y se os ha agotado la paciencia aquí os dejo un enlace de descarga del código. Un saludo y hasta la próxima!