Diseño Web Responsivo - Consultas de Medios
¿Qué es una consulta de medios?
Media query es una técnica CSS introducida en CSS3.
Utiliza la @mediaregla para incluir un bloque de propiedades CSS solo si se cumple una determinada condición.
Ejemplo
Si la ventana del navegador tiene 600 px o menos, el color de fondo será azul claro:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Agregar un punto de interrupción
Anteriormente en este tutorial creamos una página web con filas y columnas, y respondía, pero no se veía bien en una pantalla pequeña.
Las consultas de los medios pueden ayudar con eso. Podemos agregar un punto de ruptura donde ciertas partes del diseño se comportarán de manera diferente en cada lado del punto de ruptura.
Escritorio
Teléfono
Use una consulta de medios para agregar un punto de interrupción en 768px:
Ejemplo
Cuando la pantalla (ventana del navegador) se vuelve más pequeña que 768 px, cada columna debe tener un ancho del 100 %:
/* For desktop: */
.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 only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Diseñe siempre para dispositivos móviles primero
Mobile First significa diseñar para dispositivos móviles antes de diseñar para computadoras de escritorio o cualquier otro dispositivo (esto hará que la página se muestre más rápido en dispositivos más pequeños).
Esto significa que debemos hacer algunos cambios en nuestro CSS.
En lugar de cambiar los estilos cuando el ancho es menor a 768 px, debemos cambiar el diseño cuando el ancho es mayor a 768 px. Esto hará que nuestro diseño Mobile First:
Ejemplo
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
Otro punto de ruptura
Puede agregar tantos puntos de interrupción como desee.
También insertaremos un punto de interrupción entre tabletas y teléfonos móviles.
Escritorio
Tableta
Teléfono
Hacemos esto agregando una consulta de medios más (a 600 px) y un conjunto de nuevas clases para dispositivos mayores de 600 px (pero menores de 768 px):
Ejemplo
Tenga en cuenta que los dos conjuntos de clases son casi idénticos, la única diferencia es el nombre ( col-y col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
Puede parecer extraño que tengamos dos conjuntos de clases idénticas, pero en HTML nos da la oportunidad de decidir qué sucederá con las columnas en cada punto de interrupción:
Ejemplo HTML
Para escritorio:
La primera y la tercera sección abarcarán 3 columnas cada una. La sección central abarcará 6 columnas.
Para tabletas:
La primera sección abarcará 3 columnas, la segunda abarcará 9 y la tercera sección se mostrará debajo de las dos primeras secciones y abarcará 12 columnas:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Puntos de interrupción típicos del dispositivo
Hay toneladas de pantallas y dispositivos con diferentes alturas y anchos, por lo que es difícil crear un punto de interrupción exacto para cada dispositivo. Para simplificar las cosas, podría dirigirse a cinco grupos:
Ejemplo
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientación: Retrato / Paisaje
Las consultas de medios también se pueden usar para cambiar el diseño de una página según la orientación del navegador.
Puede tener un conjunto de propiedades CSS que solo se aplicarán cuando la ventana del navegador sea más ancha que su altura, una orientación denominada "Horizontal":
Ejemplo
La página web tendrá un fondo azul claro si la orientación es en modo horizontal:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Ocultar elementos con consultas de medios
Otro uso común de las consultas de medios es ocultar elementos en diferentes tamaños de pantalla:
Ejemplo
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Cambiar el tamaño de fuente con consultas de medios
También puede usar consultas de medios para cambiar el tamaño de fuente de un elemento en diferentes tamaños de pantalla:
Tamaño de fuente variable.
Ejemplo
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @referencia de medios
Para obtener una descripción general completa de todos los tipos de medios y funciones/expresiones, consulte la regla @media en nuestra referencia de CSS .