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

Comprensió de les Media Queries

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ó, explorarem què són les media queries, com funcionen i com es poden utilitzar per crear dissenys flexibles i adaptatius.

Què són les Media Queries?

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

Característiques clau de les Media Queries:

  • Condicionals: Les media queries actuen com a condicions que, si es compleixen, apliquen un conjunt d'estils CSS.
  • Adaptabilitat: Permeten que el disseny s'adapti a diferents mides de pantalla, des de telèfons mòbils fins a pantalles d'escriptori grans.
  • Flexibilitat: Poden combinar-se amb altres tècniques de CSS per crear dissenys complexos i responsius.

Sintaxi de les Media Queries

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

@media (condició) {
  /* Estils CSS */
}

Exemple bàsic:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

En aquest exemple, el color de fons del cos del document canviarà a blau clar quan l'amplada de la pantalla sigui de 600 píxels o menys.

Tipus de Media Queries

Les media queries poden basar-se en diverses característiques del dispositiu:

  • Ample i Alçada: min-width, max-width, min-height, max-height
  • Resolució: min-resolution, max-resolution
  • Orientació: orientation (pot ser portrait o landscape)
  • Aspect Ratio: min-aspect-ratio, max-aspect-ratio

Exemple d'ús de diverses característiques:

@media (min-width: 768px) and (orientation: landscape) {
  .container {
    width: 80%;
  }
}

Aquest exemple aplica un estil a .container quan l'amplada de la pantalla és de 768 píxels o més i l'orientació és horitzontal.

Exercici Pràctic

Objectiu: Crear una media query que canviï el color de fons d'un element div quan la pantalla sigui més petita de 500 píxels.

Pas a Pas:

  1. Crea un document HTML senzill amb un div.
  2. Afegeix estils CSS per defecte al div.
  3. Implementa una media query per canviar el color de fons quan l'amplada de la pantalla sigui inferior a 500 píxels.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici Media Query</title>
  <style>
    div {
      width: 100%;
      height: 100px;
      background-color: coral;
    }

    @media (max-width: 500px) {
      div {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Conclusió

Les media queries són una eina poderosa per al disseny responsive, permetent que els llocs web s'adaptin a una àmplia gamma de dispositius i mides de pantalla. Comprendre com funcionen i com utilitzar-les és essencial per crear experiències d'usuari òptimes en qualsevol dispositiu. En el següent tema, explorarem com utilitzar les media queries en CSS per crear dissenys responsius més complexos.

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