Skip to main content

Media Queries i Variables

Aquest capítol tracta sobre com adaptar els estils a diferents dispositius amb media queries, i com crear variables personalitzades per reutilitzar valors a CSS.

Què són les Media Queries?​

Les media queries permeten aplicar diferents estils segons les característiques del dispositiu, com:

  • Amplada o alçada de pantalla
  • Orientació (portrait / landscape)
  • Resolució
  • Preferències del sistema (com mode fosc)
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Sintaxi d'una media query​

@media <media-type> and (<media-feature>) {
  /* estils aplicats quan es compleix la condició */
}

Media Types més comuns:​

  • all: qualsevol dispositiu
  • screen: pantalles (monitors, mòbils, tablets…)
  • print: per impressió/PDF

Media Features habituals:​

@media (max-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (orientation: portrait) {
}
@media (prefers-color-scheme: dark) {
}
  • width, height
  • orientation
  • aspect-ratio
  • prefers-color-scheme

Operadors lògics en media queries​

@media screen and (min-width: 768px) and (orientation: landscape) {
}
@media not screen {
}
@media only screen and (max-width: 680px) {
}

Variables personalitzades en CSS​

Les variables CSS permeten definir i reutilitzar valors amb noms.

:root {
  --color-primari: #ff0000;
  --titol-gran: 48px;
  --titol-petit: 32px;
}

S’utilitzen així:

h1 {
  color: var(--color-primari);
  font-size: var(--titol-gran);
}

Valor per defecte​

color: var(--color-primari, #f0f0f0);

S’usa quan la variable no està definida.

Herència i valors invàlids​

Si una variable no és vàlida:

  1. S’usa el valor per defecte
  2. Si no n’hi ha, s’intenta heretar
  3. Si tampoc, s’usa el valor inicial del navegador

Aquest capítol et permet adaptar el teu disseny a qualsevol dispositiu i centralitzar els teus valors d’estil, millorant la flexibilitat i mantenibilitat del teu codi CSS.