Índice de contenidos
Qué es una media query
Una media query es una regla o conjunto de reglas CSS que se ejecutan para unas condiciones específicas de la pantalla (tamaño, resolución, orientación, etc.)
Cómo se usan las media query
Las media query es la base del diseño web responsive, ya que permite, entre otras cosas, modificar propiedades de elementos para que la información de nuestra web se presente de forma correcta, bien se visite desde un monitor grande o desde un teléfono con una pantalla pequeña.
Dentro de las media query, algunas propiedades que se suelen modificar suelen ser:
- Jugar con la visibilidad de elementos
display:none - Subir o bajar elementos
margin-top:10px - Acercar o separar elementos
padding-left:20px - Adecuar el tamaño de algún título
font-size:0.9rem - Retocar el ancho de una imagen
width:90px - Variar el alto de una imagen
height:50px
La premisa para usarlas es sencilla:
- Definir la resolución donde aplicar un CSS
- Declarar las clases o ID donde aplicar un estilo
- Indicar los cambios de estilo CSS correspondientes
Ejemplos de uso de Media Queries
Ejemplo 1
Se necesita ajustar la altura del logotipo, para que aparezca correctamente, a partir de un ancho de 768px.
Nueva forma de hacer media queries con CSS:
Antigua forma de realizar media queries con CSS, pero aún utilizable:
Ejemplo 2
En resoluciones menores de 420px, los h1 se ven muy grandes y alguna palabra muy larga sobresale de la pantalla, haciendo que no se lea correctamente.
Nueva forma de hacer media queries con CSS:
Antigua forma de realizar media queries con CSS, pero aún utilizable:
Ejemplo 3
Se quiere separar los enlaces que hay en el footer entre ciertas resoluciones, ya que se juntan demasiado.
Nueva forma de hacer media queries con CSS:
Antigua forma de realizar media queries con CSS, pero aún utilizable:
Como has podido ver, la idea es jugar para que en determinadas resoluciones se apliquen los estilos CSS que se necesiten.
Cuando se usa una condición tipo a @media screen and (min-width:1025px) { algo de CSS } esta sentencia se ejecutará en resoluciones de 1025px (incluido) en adelante.
En el caso de @media screen and (max-width:900px) { algo de CSS } –> Se ejecutará desde 0px hasta 900px.
Cuando se quieren utilizar dos tamaños, se debe poner primero el min-width y luego el max-width, definiendo así algo tipo a: Aplica estos estilos a tamaños entre 800px y 1200px –> @media screen and (min-width:800px) and (max-width:1200px) { algo de CSS }
Hasta dónde debo revisar si mi página web es responsive
Cualquier web debe presentar sus contenidos correctamente a 320px de ancho y de ahí en adelante.
Acualmente, este valor lo proporciona el iPhone 5SE, cuya resolución de pantalla es de 320px, siendo la más baja del mercado dentro de los actuales smartphones.
Dónde introducir las media query
Las media query se trata de código CSS, por ello, se deben ser incluidas en donde tu tema o WordPress te permita incluir CSS personalizado.
Si usas Avada, aquí te lo explico.
Si usas un tema hijo o a medida, aquí tienes como cargar una hoja de CSS externa a tu WordPress.
El futuro de las media query
Gracias al uso de flex y de grid se pueden hacer diseños complejos y que son completamente responsive,
El uso de frameworks como Boostrap y Tailwind, entre otros, ya incorporan clases para alterar los diseños sin escribir CSS
Cada vez se debiera de utilizar menos estas media queries… No obstante siguen siendo usadas para pequeños retoques o detalles.
Deja tu comentario