Media Queries en CSS
Media Queries en CSS
Media Queries en CSS
Los media queries son una sintaxis especial para CSS que nos permite
definir unos estilos que solo se aplicarán en el caso de que se cumplan unas
condiciones definidas. Podemos asimilarlos a unas líneas de código
opcional.
Aunque también las hay más complejas, como por ejemplo aquellas
combinadas que la orientación del dispositivo (landscape o portrait) o
incluso las que definen el ratio de píxeles de la pantalla, como device-
pixel-ratio, muy útil para definir estilos y CSS para las pantallas retinas,
por ejemplo, algunos iPads o iPhones. Aquí más información sobre las
especificaciones.
Cómo funciona un media query. Ejemplo
El funcionamiento en el navegador es muy sencillo. Simplemente
aplicará el código que esté incluido en un media query sobrescribiendo el
heredado. Con esto es como si estableciésemos una capa sobre otra, con
cierta transparencia, ya que no eliminamos del todo el código general de
la hoja de estilos CSS.
Un ejemplo, queremos que se muestre un código concreto solo en
pantallas y con una resolución menor a 400px. El código resultante
sería:
@media screen and (max-width: 400px) { … }
Mobile first: cómo usar los media queries de forma
correcta
Una de las dudas principales que se plantean a la hora de usar las media
queries es si definir el estilo general del CSS para escritorio y reservar
los condicionales para los móviles o hacerlo a la inversa. Estamos
hablando de las corrientes Desktop First y Mobile First.
Se ha discutido largo y tendido sobre esto, y poca gente duda ya que lo
más interesante es trabajar con mobile first, es decir, tener unos estilos
para móvil como base (pequeñas resoluciones) e ir creciendo poco a
poco añadiendo media queries para dispositivos más grandes gracias al
mediatype min-width.
Con esto conseguimos crear una versión muy liviana para los usuarios
móviles (donde el navegador solo tiene que aplicar las primeras líneas
de CSS) mientras que la carga de leer todo el conjunto sobrescribiendo
las líneas marcadas en los media queries queda para los dispositivos de
mayor resolución, que se entienden van a tener una conexión a internet
más rápida y mayor velocidad de procesamiento de dichos condicionales.
En definitiva, una herramienta muy útil que podemos usar en nuestras
hojas de estilos CSS para adaptarnos a cualquier dispositivo y
resolución. Piensa en tu web como si fuera agua, y que sea flexible para
que pueda adaptarse a las dimensiones de un vaso, una copa, una
botella o una piscina.