media queries

Media Queries de CSS3 y el diseño adaptativo

Una de las principales ventajas que nos brinda CSS3 es el uso de Media Queries. Este componente nos permite definir una clase CSS dependiendo del tamaño del visor de nuestra página.

Como ya os habréis percatado, se utilizan en el diseño adaptativo de páginas web, Responsive Web Design y es súper útil. Puesto que nos vamos a asegurar que nuestra página web se vea perfectamente en todos los posibles visores, o al menos, los más populares.

Por ejemplo, podemos definir una clase para el body tal que así:

body {
background-color: red;
}

Ahora usaremos una Media Querie para decir que si el ancho de la pantalla es de 500 pixels, ponga el color de fondo negro y el texto en blanco, en vez de rojo:

@media (max-width: 500px) {
body {
background-color: black;
color: white;
}

Obviamente este ejemplo, no tiene mucha más utilidad que la simple explicación del potencial de esta propiedad.

Concepto de Breakpoint en Media Queries

Los breakpoint, son los puntos de ruptura donde iremos añadiendo nuevos estilos a nuestra página. Por ejemplo, en el ejemplo anterior hemos puesto un breakpoint cuando se sobrepase los 500 pixels.

Ejemplo real de uso de Media Queries

Como ya os he comentado esta propiedad se usa fundamentalmente en el diseño responsive y se utiliza cuando se definen el espacio que ocuparán los contenidos d e una web, dependiendo del ancho de la pantalla.

En el siguiente código haremos que se modifiquen el espacio que ocupan cada columna, cuando el ancho de la página sea menor a 768 pixel.

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}



@media (max-width: 768px) {

/* para móviles: */

[class*="col-"] {
       width: 100%;}
}

¿Por qué hacemos esto?

Para que cuando la página se vea en un móvil se vean las seccione una encima de otra.

En la W3Schools podéis ver un ejemplo completo de uso, si tenéis dudas, dejar un comentario que os lo intento resolver.

Deja un comentario