El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Ús de les Media Queries en CSS

Següent ►
►

Les media queries són una part fonamental del disseny responsive, ja que permeten adaptar l'estil d'un lloc web a diferents mides de pantalla i dispositius. En aquesta secció, aprendrem com utilitzar les media queries en CSS per crear dissenys que s'adaptin a qualsevol entorn.

Què són les Media Queries?

Les media queries són regles CSS que permeten aplicar estils específics basats en les característiques del dispositiu, com ara l'amplada, l'alçada, la resolució, l'orientació, etc. Això permet que el disseny del lloc web canviï de manera dinàmica segons el dispositiu que l'usuari estigui utilitzant.

Sintaxi Bàsica

La sintaxi d'una media query és la següent:

@media (condició) {
  /* Estils CSS */
}
  • @media: Paraula clau que inicia una media query.
  • (condició): Especifica la condició que ha de complir el dispositiu perquè s'apliquin els estils.
  • Estils CSS: Els estils que s'aplicaran si la condició es compleix.

Exemple Pràctic

Suposem que volem canviar el color de fons d'un element <div> quan l'amplada de la pantalla és inferior a 600 píxels:

div {
  background-color: blue;
}

@media (max-width: 600px) {
  div {
    background-color: red;
  }
}
  • Sense media query: El color de fons és blau.
  • Amb media query: Si l'amplada de la pantalla és de 600 píxels o menys, el color de fons canvia a vermell.

Tipus de Condicions

Les media queries poden utilitzar diverses condicions per adaptar els estils:

  1. max-width i min-width: Especifica l'amplada màxima o mínima de la pantalla.
  2. max-height i min-height: Especifica l'alçada màxima o mínima de la pantalla.
  3. orientation: Especifica l'orientació del dispositiu (landscape o portrait).
  4. resolution: Especifica la resolució de la pantalla.

Exemple d'Ús de Diverses Condicions

@media (min-width: 768px) and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

En aquest exemple, els estils s'aplicaran només si l'amplada de la pantalla és de 768 píxels o més i el dispositiu està en orientació horitzontal.

Exercici Pràctic

Objectiu: Crea una pàgina HTML amb un <div> que canviï de color de fons segons la mida de la pantalla.

Pas 1: Crea l'HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Media Queries</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="responsive-box">Canvia de color!</div>
</body>
</html>

Pas 2: Crea el CSS

.responsive-box {
  width: 100%;
  height: 200px;
  background-color: lightblue;
}

@media (max-width: 800px) {
  .responsive-box {
    background-color: lightgreen;
  }
}

@media (max-width: 500px) {
  .responsive-box {
    background-color: lightcoral;
  }
}

Solució

  • Pantalla > 800px: El color de fons és blau clar.
  • Pantalla ≤ 800px: El color de fons canvia a verd clar.
  • Pantalla ≤ 500px: El color de fons canvia a coral clar.

Errors Comuns i Consells

  • No oblidis el viewport meta tag: Assegura't d'incloure <meta name="viewport" content="width=device-width, initial-scale=1.0"> al teu document HTML per garantir que les media queries funcionin correctament en dispositius mòbils.
  • Prova en diversos dispositius: Sempre prova el teu disseny en diferents dispositius i resolucions per assegurar-te que es veu bé a tot arreu.
  • Utilitza unitats relatives: Quan sigui possible, utilitza unitats relatives com %, em, o rem per a una millor adaptabilitat.

Conclusió

Les media queries són una eina poderosa per crear dissenys responsius que s'adapten a qualsevol dispositiu. Amb la pràctica, podràs crear llocs web que ofereixin una experiència d'usuari consistent i atractiva, independentment de la mida de la pantalla. En el següent tema, explorarem com definir punts de trencament i dissenys responsius de manera més detallada.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats