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

Disseny Responsiu

Següent ►
►

El disseny responsiu és una tècnica de disseny web que permet que les interfícies d'usuari s'adaptin a diferents mides de pantalla i dispositius. Amb l'augment de l'ús de dispositius mòbils, el disseny responsiu s'ha convertit en un aspecte essencial del desenvolupament web modern.

Conceptes Clau del Disseny Responsiu

  1. Flexibilitat de la Disposició (Layout)

    • Utilitza unitats relatives com percentatges en lloc de píxels per definir amplades i mides.
    • Implementa dissenys de graella fluïda que s'adapten a la mida de la pantalla.

  2. Imatges Flexibles

    • Assegura't que les imatges s'ajustin a la mida de la pantalla utilitzant propietats CSS com max-width: 100%.

  3. Media Queries

    • Utilitza media queries per aplicar diferents estils CSS segons les característiques del dispositiu, com l'amplada de la pantalla.
    • Exemple de media query: 
      @media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

  4. Tipografia Adaptativa

    • Utilitza unitats relatives com em o rem per a la mida de la font, de manera que s'adapti a diferents dispositius.

  5. Punts de Trencament (Breakpoints)

    • Defineix punts de trencament per canviar el disseny en funció de l'amplada de la pantalla. Els punts de trencament comuns són 320px, 768px, i 1024px.

Exemples Pràctics

Exemple de Disseny de Graella Fluïda

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      flex: 1 1 100%;
    }
    @media (min-width: 600px) {
      .item {
        flex: 1 1 50%;
      }
    }
    @media (min-width: 900px) {
      .item {
        flex: 1 1 33.33%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
  </div>
</body>
</html>

Explicació del Codi

  • Flexbox: Utilitzem display: flex per crear una graella fluïda.
  • Flex-wrap: Permet que els elements es moguin a la següent línia si no hi ha prou espai.
  • Media Queries: Canvien el nombre d'elements per fila segons l'amplada de la pantalla.

Exercicis Pràctics

Exercici 1: Crear un Disseny Responsiu Bàsic

Objectiu: Crear una pàgina web amb un disseny responsiu que canviï el color de fons i la disposició dels elements segons la mida de la pantalla.

Instruccions:

  1. Crea un document HTML amb tres divs.
  2. Aplica estils CSS per canviar el color de fons a diferents amplades de pantalla.
  3. Utilitza media queries per ajustar la disposició dels divs.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .box {
      padding: 20px;
      text-align: center;
    }
    @media (max-width: 600px) {
      body {
        background-color: lightcoral;
      }
      .box {
        background-color: white;
        margin: 10px;
      }
    }
    @media (min-width: 601px) and (max-width: 900px) {
      body {
        background-color: lightseagreen;
      }
      .box {
        background-color: white;
        margin: 20px;
      }
    }
    @media (min-width: 901px) {
      body {
        background-color: lightgoldenrodyellow;
      }
      .box {
        background-color: white;
        margin: 30px;
      }
    }
  </style>
</head>
<body>
  <div class="box">Caixa 1</div>
  <div class="box">Caixa 2</div>
  <div class="box">Caixa 3</div>
</body>
</html>

Retroalimentació i Consells

  • Error Comú: No oblidis definir el viewport en el document HTML per assegurar que el disseny responsiu funcioni correctament en dispositius mòbils.
  • Consell: Prova el teu disseny en diferents dispositius i navegadors per assegurar-te que es veu bé a tot arreu.

Conclusió

El disseny responsiu és fonamental per crear interfícies d'usuari que funcionin bé en qualsevol dispositiu. Mitjançant l'ús de tècniques com les media queries, les imatges flexibles i els dissenys de graella fluïda, pots assegurar-te que la teva aplicació o lloc web ofereixi una experiència d'usuari consistent i agradable. En el següent mòdul, explorarem els components comuns de la interfície d'usuari i com utilitzar-los de manera efectiva.

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