Cómo hacer un Website Responsive

Cómo hacer un Website Responsive mediante el uso de Media Queries.

Para conseguir que nuestros sitios Webs se adapten a los distintos dispositivos (Escritorio, Tableta o Móvil), usaremos Media Queries con las que podremos definir las distintas reglas CSS de los distintos elementos que componen nuestro site.

Pero antes de definir los estilos, tendremos que añadir a todos los documentos de nuestro sitio la siguiente etiqueta <meta>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ahora ya podemos editar nuestra hoja de estilos CSS.

Para que todas las imágenes se adapten al 100% de su contenedor, añadimos la siguientes reglas:

img {
max-width: 100%;
height: auto;
}
@media \0screen {
img {
width: auto;
}
}

Después definimos los distintos breakpoints que serán los distintos tamaños del viewport donde se realizarán los cambios de estilos CSS para adecuar nuestro site a los distintos dispositivos.

Por ejemplo, indicamos mediante el uso de una Media Query que uno de los puntos donde se deben establecer cambios en las reglas CSS sea cuando la pantalla es igual o inferior a 768px.

@media screen and (max-width: 768px) {
/* Escribimos las distintas reglas CSS para cada uno de los elementos de nuestra Web que deba ajustarse */
}

Supongamos que tenemos una fila con dos columnas al 50% para la versión de escritorio y tablet, y para la versión de móvil (resoluciones inferiores a 480px) las columnas deben mostrarse al 100%. Nos quedaría algo así:

.fila {
display: table;
width: 100%;
} 
.columna {
display: table-cell;
width: 50%;
}

@media screen and (max-width: 480px) {
.fila {
display: block;
} 
.columna {
display: block;
width: 100%;
}
}

Como podéis ver, lo que hemos hecho ha sido indicar para resoluciones igual o inferiores a 480px, el elemento fila que se mostraba como 'table' se muestre como 'block', y en el caso de las columnas que se mostraban como 'table-cell' al '50%', se muestren como 'block' al '100%'.

Además, para aquellos elementos que tengan 'padding' o relleno, podemos usar la siguiente regla para que dicho padding no se sume a las dimensiones propias del elemento:

box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;

En principio con estas reglas básicas, podréis ajustar cualquier site a las distintas resoluciones que necesitéis.

Como últimos consejos, usaremos medidas en % (es decir relativas), en lugar de medidas absolutas en px; y evitaremos usar la propiedad float.