¿Qué es una Media Query?
La Media Query es una técnica CSS introducida en CSS3.
Utiliza la regla @media para incluir un bloque de propiedades CSS solo si una cierta condición es verdadera.
Las consultas de los medios se pueden utilizar para verificar muchas cosas, como:
- ancho y alto de la ventana
- ancho y alto del dispositivo
- orientación (¿la tableta / teléfono está en modo horizontal o vertical?)
- resolución
El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada para computadoras de escritorio, computadoras portátiles, tabletas y teléfonos móviles (como los teléfonos iPhone y Android).
Sintaxis de consulta de medios
Una consulta de medios consta de un tipo de medio y puede contener una o más expresiones, que se resuelven como verdaderas o falsas.
Por ejemplo en este query el fondo de todos los h2 sera tomado solo si tiene un rango mínimo de 50rem y un máximo de 75rem en el ancho de la pantalla
@media screen and (min-width:50rem) and (max-width:75rem)
{
h2{ background-color: tomato;}
}
El resultado de la consulta es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones en la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, se aplican la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas normales en cascada.
A menos que utilice los operadores no o solo, el tipo de medio es opcional y all tipo estará implícito.
También puede tener diferentes hojas de estilo para diferentes medios.
Ejemplo sencillo: MENU RESPOSIVO
Tenemos un pequeño menú el cual diseñamos de la siguiente manera que en teoría es lo original
* {
box-sizing: border-box;
}
.nav {
overflow: hidden;
background-color: #333;
}
.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
p{
width: 50%;
float: left;
}
Pero al meter nosotros nuestra primer quería la restricción nos dice que cuando el ancho de la pantalla este entre un mínimo de 75rem y un máximo de 120rem el fondo de la etiqueta h2 será de color #FCF7FF, y todo sigue igual en nuestro navegador
@media screen and (min-width: 75rem) and (max-width:120rem){
h2{ background-color: #FCF7FF;}
}
Pero cuando nuestra pantalla cumpla la siguiente restricción el fondo de la etiqueta h2 cambiara a #967AA1 la barra de menú o navegador dejara de flotar y cubrirán el 100% del ancho y las etiquetas p también lo haciendo que a pesar de lo pequeño de nuestra pantalla no se pierdan los elementos del menú.
@media screen and (min-width:25rem) and (max-width:50rem){
h2{
background-color: #967AA1; }
p{
width: 100%;
float: none; }
.nav a {
float: none;
width: 100%; }
}
See the Pen
bZqPGV by Jonathan Eduardo (@JhonQuistiano)
on CodePen.