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

Media Queries

Següent ►
►

Introducció a les Media Queries

Les Media Queries són una característica clau del CSS3 que permeten aplicar diferents estils CSS en funció de les característiques del dispositiu que visualitza la pàgina web, com ara l'amplada, l'alçada, la resolució, l'orientació, etc. Això és fonamental per al disseny web responsiu, ja que permet adaptar el disseny a diferents mides de pantalla i dispositius.

Conceptes Clau

  • Media Query: Una expressió que utilitza una o més característiques dels dispositius per aplicar estils CSS específics.
  • Breakpoints: Punts de ruptura on els estils canvien per adaptar-se a diferents mides de pantalla.

Sintaxi Bàsica

La sintaxi d'una Media Query és la següent:

@media (característica) {
  /* Estils CSS */
}

Exemple:

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

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

Tipus de Media Queries

Media Queries per Amplada

  • max-width: Aplica els estils quan l'amplada de la pantalla és igual o menor que el valor especificat.
  • min-width: Aplica els estils quan l'amplada de la pantalla és igual o major que el valor especificat.

Exemples:

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .container {
    width: 50%;
  }
}

Media Queries per Alçada

  • max-height: Aplica els estils quan l'alçada de la pantalla és igual o menor que el valor especificat.
  • min-height: Aplica els estils quan l'alçada de la pantalla és igual o major que el valor especificat.

Exemple:

@media (max-height: 800px) {
  .sidebar {
    display: none;
  }
}

Media Queries per Orientació

  • orientation: portrait: Aplica els estils quan el dispositiu està en mode vertical.
  • orientation: landscape: Aplica els estils quan el dispositiu està en mode horitzontal.

Exemple:

@media (orientation: landscape) {
  .header {
    height: 50px;
  }
}

Media Queries per Resolució

  • min-resolution: Aplica els estils quan la resolució és igual o major que el valor especificat.
  • max-resolution: Aplica els estils quan la resolució és igual o menor que el valor especificat.

Exemple:

@media (min-resolution: 300dpi) {
  .high-res-image {
    display: block;
  }
}

Exemples Pràctics

Exemple 1: Disseny Responsiu Bàsic

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

    .container {
      width: 100%;
      padding: 20px;
      background-color: lightgray;
    }

    @media (min-width: 600px) {
      .container {
        width: 80%;
        margin: 0 auto;
        background-color: lightgreen;
      }
    }

    @media (min-width: 1024px) {
      .container {
        width: 60%;
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Media Queries en Acció</h1>
    <p>Aquesta és una demostració de com utilitzar les Media Queries per crear un disseny responsiu.</p>
  </div>
</body>
</html>

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

<!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;
    }

    .header {
      height: 100px;
      background-color: lightblue;
    }

    @media (orientation: landscape) {
      .header {
        height: 50px;
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Canvi d'Estil en Funció de l'Orientació</h1>
  </div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Disseny Responsiu per a Diferents Mides de Pantalla

Crea una pàgina HTML amb una secció .content que canviï el seu color de fons i amplada en funció de la mida de la pantalla:

  • Fins a 599px: amplada 100%, color de fons blau clar.
  • De 600px a 1023px: amplada 80%, color de fons verd clar.
  • A partir de 1024px: amplada 60%, color de fons coral clar.

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 Queries</title>
  <style>
    .content {
      padding: 20px;
      background-color: lightblue;
    }

    @media (min-width: 600px) {
      .content {
        width: 80%;
        margin: 0 auto;
        background-color: lightgreen;
      }
    }

    @media (min-width: 1024px) {
      .content {
        width: 60%;
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>Exercici Media Queries</h1>
    <p>Aquesta secció canvia d'estil en funció de la mida de la pantalla.</p>
  </div>
</body>
</html>

Exercici 2: Canvi d'Estil en Funció de l'Orientació

Crea una pàgina HTML amb una secció .sidebar que es mostri només en mode horitzontal i s'amagui en mode vertical.

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>
    .sidebar {
      display: none;
      background-color: lightgray;
      padding: 20px;
    }

    @media (orientation: landscape) {
      .sidebar {
        display: block;
      }
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <h1>Sidebar</h1>
    <p>Aquesta secció només es mostra en mode horitzontal.</p>
  </div>
</body>
</html>

Resum

Les Media Queries són una eina poderosa per crear dissenys web responsius que s'adapten a diferents dispositius i mides de pantalla. Amb elles, pots aplicar estils específics en funció de l'amplada, l'alçada, l'orientació i la resolució del dispositiu. Practicar amb exemples i exercicis t'ajudarà a dominar aquesta tècnica essencial per al desenvolupament web modern.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

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