Adaptar página web al movil con media queries.

    Con el uso de media queries de CSS3 podemos adaptar de forma sencilla nuestra página para que esta se vea correctamente en un móvil o en una tablet. Este ejemplo que os comento sólo lo aconsejo para aplicarlo a páginas sencillas. Para páginas más elaboradas es mejor crear CSS específicos y realizar un redireccionamiento al CSS que queramos cargar dependiendo del dispositivo que se esté usando. En este caso, continuando con la página Las Edades de la Tierra, vamos a introducir, dentro del mismo CSS, unas reglas media query, las cuales se ejecutarán, dependiendo del tipo de pantalla con la que estemos  visualizando la página. Antes de nada quiero hacer hincapié en que, para hacer una página adaptable, es conveniente que, siempre que sea posible, uséis porcentajes en las medidas. (Ver 'Consejos crear web' y 'Imagen adaptable todas resoluciones' ).

   Bien, para hacer esto, basta con añadir un código como el siguiente al final de nuestro CSS:


@media screen and (max-width: 320px) {
#cabecera {
    clear: left;
    float: left;
    height: 50px;
    overflow: visible;
    position: relative;
}

#imgback {
position: fixed;
z-index: -1;
top: 90px;
left: 0;
width: 100%;
}
.menu{
border-color: #00FF99 #00FF99 #00FF99;
border-image: none;
border-radius: 0 15px 15px 0;
border-style: solid solid solid none;
border-width: 1px 1px 1px 0;
box-shadow: 0 0 5px black;
width:90%;
clear: left;
color: #0FF;
margin: 0 0 30px;
overflow: hidden;
padding: 4px 15px 20px 0;
position: relative;
z-index:100;
}
.menuuno {
background-image: none;
background-color: rgba(0, 0, 0, 0.6);
}
.menudos {
background-image:none;
background-color: rgba(0, 0, 0, 0.6);
}
#enlaces {
display:none;
}
#abrecierracanvas {
display:none;
}
#notas {
display:none;
}
#migrafico {
display:none;
}
}

@media screen and (max-width :480px) and (min-width: 321px) {
html { 
font-size: 90%;
background-color:#000;
-webkit-text-size-adjust: 90%; 
-ms-text-size-adjust: 90%; 
}
body {
margin:0 auto;
font-family:"Times New Roman", Times, serif;
font-size:90%;
width:98%;
}
#cabecera {
    clear: left;
    float: left;
    height: 50px;
    overflow: visible;
    position: relative;
}

#imgback {
position: fixed;
z-index: -1;
top: 90px;
left: 0;
width: 100%;
}
.menu{
border-color: #00FF99 #00FF99 #00FF99;
border-image: none;
border-radius: 0 15px 15px 0;
border-style: solid solid solid none;
border-width: 1px 1px 1px 0;
box-shadow: -5px 10px 10px black;
width:45%;
clear: left;
color: #0FF;
margin: 0 0 30px;
overflow: hidden;
padding: 4px 15px 20px 0;
position: relative;
z-index:100;
}
.menuuno {
background-image:none;
background-color: rgba(0, 0, 0, 0.6);
}
.menudos {
background-image:none;
background-color: rgba(0, 0, 0, 0.6);
}
#abrecierracanvas {
display:none;
}

#notas {
display:none;
}
#migrafico {
display:none;
}
}


Lo primero, decir que sólo es necesario incluir aquellas reglas que necesiten una modificación para que se adapten a ese tipo de pantalla. Lo segundo, en este ejemplo, estamos adaptando la página web a una pantalla de móvil tipo Iphone 3 o Samsung Galaxy SII. En la primera parte ("@media screen and (max-width: 320px)"), definimos las reglas para una pantalla que tenga como máximo una anchura de 320px. Y, en la segunda parte ("@media screen and (max-width :480px) and (min-width: 321px)") definimos las reglas para una pantalla con un máximo de anchura de 480px y un mínimo de anchura de 321px. Con esto conseguimos definir reglas para el móvil tanto si está en vertical como en horizontal. Ver más sobre las media query en 'Uso de media queries' y, con solo escribir en el buscador: CSS3 media query, tendréis infinidad de consultas sobre su uso.