CSS Media Query

¿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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.