🎯 Introducció a les @media queries (Consultes multimèdia)
Les @media queries són una funcionalitat essencial del CSS que permet adaptar el disseny d’una pàgina web segons les característiques del dispositiu que l’està visualitzant. Dit d’una altra manera: són les responsables que una web es vegi bé tant en un ordinador de sobretaula com en un mòbil petit.
🧠 Què permeten fer?
- Detectar l’amplada i alçada de la pantalla
- Saber si el dispositiu està en orientació vertical o horitzontal
- Reconèixer la resolució o densitat de píxels (ideal per pantalles retina)
- Aplicar estils específics segons el tipus de dispositiu (mòbil, tablet, escriptori)
📦 Exemple bàsic
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
}
}
Aquest fragment fa que el fons del cos sigui gris clar només si la pantalla té una amplada màxima de 768 píxels (mòbil o tablet petita).
🧩 Per què són importants?
- Milloren l’experiència d’usuari: cada dispositiu rep una versió optimitzada del disseny.
- Eviten dissenys trencats: el contingut s’adapta i es reorganitza segons l’espai disponible.
- Permeten disseny fluid i accessible: essencial en un món on la navegació mòbil supera la d’escriptori.
Les @media queries són com un vestit a mida per cada pantalla. Sense elles, el web seria com portar sabates de talla única: incòmode i poc elegant.