En desarrollo web, Media Queries es un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo como la resolución de pantalla (por ejemplo, un smartphone frente a pantallas de alta definición) o la presencia de características de accesibilidad como el braille. Se convirtió en un estándar recomendado por la W3C en Junio del 2012. y es un principio básico de la tecnología de Diseño web adaptativo. Leer Más...Media query (consultas de medios) limita el alcance de los estilos CSS para que solo se apliquen cuando se cumplen ciertas condiciones de medios.
Piense en las consultas de los medios de comunicación como sentencias if-else para que el navegador las interprete. Las consultas de medios son expresiones lógicas que se evalúan como verdaderas o falsas.
Una consulta de medios consta de un tipo de medios opcional, cero o más funciones de medios y palabras clave lógicas que permiten la construcción de expresiones más complejas. La sintaxis es la siguiente:
@media [not | only] <media-type> [and] (<media-condition>);Tipos de medios
Un tipo de medio es una amplia categoría de dispositivos de agente de usuario en los que se puede mostrar un documento. La lista de tipos de medios se ha revisado en la especificación de nivel 4 de Consultas de medios. Como tal, los siguientes tipos de medios están definidos para su uso en media queries (consultas de medios):
- all: Coincide con todos los dispositivos.
- print: Hace coincidir las impresoras y los dispositivos destinados a reproducir una pantalla impresa, como un navegador web que muestra un documento en "Vista preliminar de impresión"
- screen: Coincide con todos los dispositivos que no coinciden con la impresión o el habla.
- speech: Coincide con lectores de pantalla y dispositivos similares que "leen" una página.
Características de los medios
Las características de los medios son una condición más granular que los tipos de medios, ya que se dirigen a una única característica específica del dispositivo en cuestión. La sintaxis de una característica de medios es la misma que una propiedad de CSS, que consiste en un nombre de característica, dos puntos y el valor para probar.
La lista de funciones de medios también ha cambiado del Nivel 3 de consultas de Medios al Nivel 4 de consultas de Medios. Las funciones en desuso se han mantenido en la especificación para compatibilidad con versiones anteriores, pero se ha enfatizado que no deben usarse en nuevas hojas de estilo. Los agentes de usuario seguirán apoyándolos como se especifica.
- Dimensiones de la pantalla del dispositivo: width, height, aspect-ratio, orientation.
- Calidad de la pantalla: resolution, scan, grid, update, overflow-block, overflow-inline.
- Color: color, color-index, monochrome, color-gamut.
- Interacción: pointer, hover, any-pointer y any-hover.
- Scripting: scripting.
Usando consultas de medios para diseño responsivo
La idea detrás del diseño responsive es ofrecer una gran experiencia en una variedad de dispositivos utilizando el mismo código base. Esto significa que el código que escribimos debe ser agnóstico al dispositivo. Ejecutar bien el diseño de respuesta no es una tarea pequeña, y requiere que aceptemos la fluidez de la Web en lugar de luchar para controlarla. Y las consultas de los medios son una parte integral de la implementación de un diseño responsivo.
La naturaleza extensible de las consultas de medios permite todo tipo de expresiones de medios complejas, pero las más utilizadas en el contexto del diseño responsivo son aquellas que se dirigen width y en menor medida a height.
En términos generales, hay dos formas de estructurar estas consultas de medios. Tendemos a referirnos a min-width qué son las consultas de medios basadas en dispositivos móviles primero. Esto significa que los estilos base se dirigen a la ventana gráfica más pequeña y se aplican estilos adicionales a medida que la ventana gráfica se hace más grande. A la inversa, max-width qué son las consultas de medios basadas en el tamaño de la ventana gráfica más grande son las predeterminadas y aplican estilos adicionales para atender tamaños de ventana gráfica más pequeños.
Ejemplo simple de ancho mínimo
Digamos que queremos un diseño de dos columnas con una sección de contenido principal que ocupe 3/4 de la página y una barra lateral a la derecha que ocupe 1/4 de la página. Luego, en un dispositivo con una ventana gráfica estrecha, como un teléfono móvil, queremos que esta misma página web muestre el contenido de la barra lateral debajo del contenido principal.
Ver resultadosEn el ejemplo anterior, la consulta utilizada es:
@media (min-width: 35em) {
/* Algunas propiedades CSS */
}Para este escenario en particular, ni siquiera tenemos que escribir ningún estilo base porque el elemento principal y el elemento aparte son elementos de bloque, y los navegadores mostrarán el elemento principal en la parte superior y el elemento aparte debajo de él de manera predeterminada. Esta es una de las razones por las que algunos desarrolladores abogan por el uso de consultas de medios de ancho mínimo para un diseño receptivo. Muchas veces, estarás escribiendo menos código.
Ejemplo simple de ancho máximo
Vamos a codificar el mismo escenario utilizando consultas de ancho máximo en su lugar. La consulta de medios utilizada en este caso será:
@media (max-width: 35em) {
/* Algunas propiedades CSS */
}Como tal, deberá escribir los estilos base que representan el elemento main a la izquierda y el elemento aside a la derecha. Luego, deshaga esos estilos en la consulta de medios para atender los tamaños de pantalla estrechos. Por lo tanto, para este escenario en particular, tendría más sentido utilizar la consulta de medios de 'ancho mínimo'.
Ver resultados
Habrá otros escenarios donde una consulta de medios de 'ancho máximo' tendría sentido, como en las tablas. La visualización predeterminada para una tabla funciona bien en pantallas anchas, pero en pantallas más pequeñas, es posible que desee aplicar un 'display: bloque'; a las filas de la tabla y las celdas de la tabla para que el contenido se lea mejor en una pantalla estrecha.
<style>
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background: #f0f0f0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 2em auto;
max-width: 45em;
border: 1px solid #aaa;
padding: 1em;
}
.viewport {
position: absolute;
font-size: 75%;
padding: 5px;
color: grey;
background: white;
top: 0;
left: calc(50% - 70px);
border-radius: 11px;
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid grey;
padding: 0.5em;
}
@media screen and (max-width: 35em) {
tr,
td {
display: block;
width: 100%;
}
}
</style>
<body>
<div class="container">
<p class="viewport">Ancho de la ventana (Viewport width): <span class="c-viewport__width" id="vpWidth"></span>px
</p>
<table>
<tr>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
</tr>
<tr>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
</tr>
<tr>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
<td>Tutoriales En Linea</td>
</tr>
</table>
</div>Ver resultadosNo hay una regla dura y rápida, pero el principio rector sería hacer su elección basándose en los valores predeterminados del elemento. Si el valor predeterminado funciona bien en una pantalla angosta, use las consultas de medios de 'ancho mínimo' para agregar estilos en pantallas más anchas. Si el valor predeterminado funciona bien en una pantalla ancha, use las consultas de medios de 'ancho máximo' para agregar estilos en pantallas más estrechas.
Utilizar unidades relativas para consultas de medios.
El ancho definido en sus consultas de medios se conoce como puntos de interrupción. Estos son los puntos donde usted elige que su contenido se ajuste de la manera que mejor se adapte a la cantidad de espacio disponible. Aunque era un enfoque común para los anchos de destino basados en dispositivos populares, hoy en día, con el gran volumen de tamaños de pantalla en su hábitat natural, esto ya no es una solución viable.
Idealmente, deberíamos dejar que el contenido determine cuáles serán los puntos de ruptura. Una ventaja de diseñar para el tamaño de pantalla más pequeño nos obliga a identificar conscientemente cuál es la información más importante y cómo puede presentarse a sus usuarios de la manera más clara y accesible.
En circunstancias normales, su elección de unidad de CSS para las consultas de medios de alto o ancho no hace mucha diferencia. Sin embargo, no podemos controlar cuándo nuestros usuarios modifican el entorno de navegación haciendo zoom o cambiando la configuración de la fuente. Si lo hacen, entonces empezamos a encontrar algunos comportamientos inesperados.
Dado que dejamos que el contenido dicte nuestros valores de punto de interrupción, si los usuarios cambiaran la configuración de 'tamaño de fuente' de su navegador, nos gustaría que la consulta de medios se adapte a ese cambio en consecuencia. Sin embargo, si utilizáramos unidades absolutas como píxeles, la consulta de medios se mantendría fija en un valor que quizás ya no sea adecuado para el contenido.
Evitando el doble punto de quiebre.
Surge un problema cuando usamos consultas de ancho mínimo y ancho máximo debido a la lógica de cómo se evalúan estas consultas. Los operadores de comparación son inclusivos, esto significa que la condición se cumple una vez que el ancho de la ventana gráfica coincide con el valor del punto de corte declarado. Digamos que tenemos una consulta de ancho mínimo y una consulta de ancho máximo que utiliza 35em como punto de interrupción. Cada uno de los principales navegadores utiliza un motor de renderización diferente, por lo tanto, en 35em, su sitio puede no comportarse como se esperaba y la gravedad del impacto dependerá del tipo de estilos dentro de cada consulta de medios.
Para esta demostración, el comportamiento esperado es que la sección principal tenga un fondo verde en la configuración de 2 columnas y un fondo rojo en la configuración de 1 columna. En '35em', la consulta 'min-width' que establece flex-wrap en nowrap y la consulta 'max-width' que establece 'color de fondo' en 'rojo' y la 'flex-bases' en '100% 'están activos al mismo tiempo, por lo tanto,' rompiendo 'nuestra demo.
Ver resultadosLa clave para sacar de esta demostración es garantizar que al usar consultas adyacentes de 'ancho mínimo' y 'ancho máximo', no use el mismo ancho para ambos. Un enfoque común es tener una separación de 0.01em para evitar esta superposición.
Ejemplos de casos de uso para consultas de medios
Las consultas de medios más prácticas son aquellas que apuntan al ancho y en menor medida a la altura. Las funciones de medios restantes descritas anteriormente generalmente no están bien soportadas en el momento de la escritura.
Paso a paso numérico
Las consultas de medios nos permiten utilizar el mismo conjunto de elementos HTML incluso si el diseño para dispositivos móviles y de escritorio son muy diferentes, aunque hay un límite en cuanto a qué tan diferentes pueden ser ambos diseños.
<style>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #f0f0f0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
min-width: 21.25em;
margin: 0;
}
.passengers {
padding: 1em;
margin-left: auto;
margin-right: auto;
max-width: 60em;
}
h1 {
font-size: 1.5em;
text-align: center;
margin-bottom: 1em;
}
.passenger {
margin-bottom: 1em;
padding-right: 1.69492%;
}
@media screen and (min-width: 31em) {
.passenger {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
border-right: 1px solid black;
}
.passenger:nth-child(3n) {
float: right;
margin-right: 0;
border-right: 0;
}
}
@media screen and (min-width: 31em) {
.passenger__label {
text-align: center;
margin-bottom: 1em;
}
}
@media screen and (max-width: 30.99em) {
.passenger__label {
display: inline-block;
vertical-align: middle;
width: calc(100% - 10.25em);
}
}
@media screen and (max-width: 24.5em) {
.passenger__label span {
display: block;
}
}
@media screen and (min-width: 31em) and (max-width: 39.99em) {
.passenger__label span {
display: block;
}
}
.passenger__stepper {
position: relative;
display: inline-block;
}
.passenger__stepper > * {
display: inline-block;
vertical-align: middle;
}
@media screen and (min-width: 31em) {
.passenger__stepper {
display: block;
max-width: 14em;
margin: 0 auto;
width: 100%;
}
.passenger__stepper::after {
content: '';
display: block;
clear: both;
}
}
.stepper {
border: 0;
outline: 0;
cursor: pointer;
font-size: 1.25em;
background: black;
color: white;
width: 2em;
height: 2em;
border-radius: 50%;
box-shadow: 0.125em 0.125em 0 0 white, 0.125em 0.125em 0 1px black;
}
.stepper:active {
box-shadow: 0 0 0 1px white, 0 0 0 1px black;
-webkit-transform: translate(0.125rem, 0.125rem);
transform: translate(0.125rem, 0.125rem);
}
.stepper__display {
font-size: 2em;
margin: 0 0.5em;
}
@media screen and (min-width: 31em) {
.stepper__display {
font-size: 5em;
float: left;
line-height: 1.2;
margin: 0;
padding-left: 1rem;
}
.stepper {
position: absolute;
right: 1rem;
}
.stepper__more {
top: 0;
}
.stepper__less {
bottom: 0;
}
}
</style>
<body>
<div class="passengers">
<h1>Seleccione numero de pasajeross</h1>
<div class="passenger">
<p class="passenger__label">Adulto <span>(años 12 & up)</span></p>
<div class="passenger__stepper">
<button type="button" class="stepper stepper__less">-</button>
<p class="stepper__display">1</p>
<button type="button" class="stepper stepper__more">+</button>
</div>
</div>
<div class="passenger">
<p class="passenger__label">Niños <span>(años 2-11yrs)</span></p>
<div class="passenger__stepper">
<button type="button" class="stepper stepper__less">-</button>
<p class="stepper__display">1</p>
<button type="button" class="stepper stepper__more">+</button>
</div>
</div>
<div class="passenger">
<p class="passenger__label">Infantil <span>(años 1-23mths)</span></p>
<div class="passenger__stepper">
<button type="button" class="stepper stepper__less">-</button>
<p class="stepper__display">1</p>
<button type="button" class="stepper stepper__more">+</button>
</div>
</div>
</div>Ver resultados
La demostración anterior requiere el uso de consultas de medios de 'ancho mínimo' y 'ancho máximo' para garantizar que esas propiedades sean las que se usan en cada uno de los bloques de consulta de medios que no caen en cascada entre sí.
Diálogos modales
Los diálogos modales están destinados a centrar la atención del usuario en el contenido del modal y por lo general, se muestran centrados verticalmente en el centro de la página. Esto funciona bien si hay suficiente espacio alrededor del modal, pero en una pantalla más pequeña, no hay mucho espacio para empezar. Sería mejor simplemente mostrar el modal en la parte superior de la pantalla y utilizar el espacio limitado de la pantalla lo mejor que pueda.
<style>
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.viewport {
position: absolute;
z-index: 10;
font-size: 75%;
padding: 5px;
color: grey;
background: white;
top: 0;
left: calc(50% - 70px);
border-radius: 11px;
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
}
.overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
.modal {
max-width: 30em;
width: 100%;
margin: 1em auto;
background: #fff;
text-align: center;
padding: 1em;
}
@media (min-height: 400px) and (min-width: 500px) {
.modal {
position: absolute;
left: 50%;
top: 2em;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<body>
<p class="viewport">Viewport height: <span class="c-viewport__height" id="vpHeight"></span>px
</p>
<div class="overlay">
<div class="modal">
<h2>Modal Title</h2>
<p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
<button>Okay</button>
</div>
</div>Ver resultados
Comentarios