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

Consultes de Mitjans

Següent ►
►

Les consultes de mitjans (media queries) són una característica poderosa de CSS que permet aplicar estils específics en funció de les característiques del dispositiu, com la mida de la pantalla, la resolució, l'orientació, etc. Són essencials per crear dissenys responsius que s'adaptin a diferents dispositius i mides de pantalla.

Conceptes Bàsics de les Consultes de Mitjans

Sintaxi de les Consultes de Mitjans

La sintaxi bàsica d'una consulta de mitjans és la següent:

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

Exemples de Condicions Comunes

  1. Amplada Màxima (max-width): Aplica estils quan l'amplada de la pantalla és menor o igual a un valor específic.

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

  2. Amplada Mínima (min-width): Aplica estils quan l'amplada de la pantalla és major o igual a un valor específic.

    @media (min-width: 601px) {
  body {
    background-color: lightgreen;
  }
}

  3. Orientació (orientation): Aplica estils en funció de l'orientació del dispositiu (landscape o portrait).

    @media (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

  4. Resolució (resolution): Aplica estils en funció de la resolució del dispositiu.

    @media (min-resolution: 2dppx) {
  body {
    background-color: lightgoldenrodyellow;
  }
}

Combinació de Condicions

Les condicions es poden combinar utilitzant operadors lògics com and, or i not.

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightpink;
  }
}

Exemples Pràctics

Exemple 1: Disseny Responsiu Bàsic

Aquest exemple mostra com canviar el disseny d'una pàgina web en funció de la mida de la pantalla.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple de Consultes de Mitjans</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }

    .header, .footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px 0;
    }

    .main {
      background-color: #f4f4f4;
      padding: 20px;
    }

    @media (max-width: 600px) {
      .container {
        padding: 10px;
      }

      .header, .footer {
        padding: 5px 0;
      }

      .main {
        padding: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Capçalera</div>
    <div class="main">Contingut Principal</div>
    <div class="footer">Peu de pàgina</div>
  </div>
</body>
</html>

Exemple 2: Canvi d'Estils en Funció de l'Orientació

Aquest exemple mostra com canviar els estils en funció de l'orientació del dispositiu.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple d'Orientació</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: lightgray;
    }

    .content {
      text-align: center;
      padding: 50px;
    }

    @media (orientation: landscape) {
      body {
        background-color: lightblue;
      }
    }

    @media (orientation: portrait) {
      body {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Canvi d'Estils en Funció de l'Orientació</h1>
    <p>Gira el dispositiu per veure el canvi de color de fons.</p>
  </div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Disseny Responsiu per a Diferents Mides de Pantalla

Objectiu: Crear un disseny que canviï el color de fons i la mida del text en funció de la mida de la pantalla.

Instruccions:

  1. Crea un fitxer HTML amb una estructura bàsica.
  2. Afegeix estils CSS per canviar el color de fons i la mida del text per a pantalles petites (menys de 600px) i grans (més de 600px).

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici de Consultes de Mitjans</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      text-align: center;
      padding: 50px;
    }

    h1 {
      font-size: 2em;
    }

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

      h1 {
        font-size: 1.5em;
      }
    }

    @media (min-width: 601px) {
      body {
        background-color: lightseagreen;
      }

      h1 {
        font-size: 2.5em;
      }
    }
  </style>
</head>
<body>
  <h1>Exercici de Consultes de Mitjans</h1>
  <p>Canvia la mida de la finestra per veure els canvis d'estil.</p>
</body>
</html>

Exercici 2: Estils Diferents per a Orientació Landscape i Portrait

Objectiu: Aplicar estils diferents en funció de l'orientació del dispositiu.

Instruccions:

  1. Crea un fitxer HTML amb una estructura bàsica.
  2. Afegeix estils CSS per canviar el color de fons i l'alineació del text en funció de l'orientació del dispositiu.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici d'Orientació</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      text-align: center;
      padding: 50px;
    }

    h1 {
      font-size: 2em;
    }

    @media (orientation: landscape) {
      body {
        background-color: lightblue;
        text-align: left;
      }
    }

    @media (orientation: portrait) {
      body {
        background-color: lightgreen;
        text-align: right;
      }
    }
  </style>
</head>
<body>
  <h1>Exercici d'Orientació</h1>
  <p>Gira el dispositiu per veure els canvis d'estil.</p>
</body>
</html>

Errors Comuns i Consells

Errors Comuns

  1. No incloure la meta etiqueta viewport: Sense aquesta etiqueta, les consultes de mitjans poden no funcionar correctament en dispositius mòbils.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. No tancar correctament les claus de les consultes de mitjans: Assegura't que totes les claus {} estiguin correctament tancades.

  3. Utilitzar condicions contradictòries: Evita utilitzar condicions que es contradiguin entre elles, ja que pot causar comportaments inesperats.

Consells

  1. Prova les teves consultes de mitjans en diferents dispositius: Utilitza eines com el mode de desenvolupador del navegador per simular diferents dispositius i mides de pantalla.
  2. Comença amb un disseny mobile-first: Escriu els estils per a dispositius mòbils primer i després afegeix consultes de mitjans per a pantalles més grans.
  3. Utilitza unitats relatives: Les unitats relatives com em i rem poden ajudar a mantenir un disseny més flexible i responsiu.

Conclusió

Les consultes de mitjans són una eina fonamental per crear dissenys web responsius que s'adaptin a diferents dispositius i mides de pantalla. Amb una comprensió sòlida de la seva sintaxi i l'ús adequat de les condicions, pots assegurar-te que el teu lloc web ofereixi una experiència òptima per a tots els usuaris, independentment del dispositiu que utilitzin.

◄ Anterior
◄
Següent ►
►

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats