El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

El disseny responsiu és una tècnica de disseny web que permet que les pàgines web s'adaptin a diferents mides de pantalla i dispositius. Amb l'augment de l'ús de dispositius mòbils per accedir a Internet, és essencial que els llocs web siguin accessibles i usables en qualsevol dispositiu, ja sigui un ordinador de sobretaula, una tauleta o un telèfon mòbil.

Objectius del Disseny Responsiu

Accessibilitat Universal: Assegurar que el lloc web sigui fàcilment accessible des de qualsevol dispositiu.
Millora de l'Experiència d'Usuari: Proporcionar una experiència d'usuari consistent i agradable independentment del dispositiu utilitzat.
Optimització del Rendiment: Reduir el temps de càrrega i l'ús de dades per als dispositius mòbils.
Facilitat de Manteniment: Mantenir un sol conjunt de codi per a totes les plataformes, facilitant així el manteniment i les actualitzacions.

Principis del Disseny Responsiu

Disseny Fluid: Utilitzar unitats relatives com percentatges (%) en lloc d'unitats fixes com píxels (px) per definir amplades i mides.
Consultes de Mitjans (Media Queries): Aplicar estils CSS específics segons les característiques del dispositiu, com l'amplada de la pantalla.
Imatges Responsives: Ajustar les imatges perquè s'adaptin a diferents mides de pantalla sense perdre qualitat.
Tipografia Responsiva: Utilitzar unitats relatives per a la mida del text, com em o rem, per assegurar que el text sigui llegible en qualsevol dispositiu.

Exemples Pràctics

Disseny Fluid

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disseny Fluid</title>
    <style>
        .container {
            width: 80%; /* Utilitzar percentatges per a l'amplada */
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Exemple de Disseny Fluid</h1>
        <p>Aquest contenidor s'adapta a l'amplada de la pantalla.</p>
    </div>
</body>
</html>

Consultes de Mitjans

/* Estils per a pantalles grans */
body {
    font-size: 16px;
}

/* Estils per a pantalles mitjanes */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* Estils per a pantalles petites */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}

Imatges Responsives

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imatges Responsives</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="imatge.jpg" alt="Exemple d'imatge responsiva">
</body>
</html>

Tipografia Responsiva

html {
    font-size: 100%; /* 1 rem = 16px per defecte */
}

body {
    font-size: 1rem; /* 16px */
}

h1 {
    font-size: 2rem; /* 32px */
}

p {
    font-size: 1rem; /* 16px */
}

Exercici Pràctic

Objectiu

Crear una pàgina web senzilla que s'adapti a diferents mides de pantalla utilitzant els principis del disseny responsiu.

Instruccions

Crea un fitxer HTML amb una estructura bàsica.
Afegeix un contenidor amb un disseny fluid.
Utilitza consultes de mitjans per ajustar la mida del text segons la mida de la pantalla.
Inclou una imatge que s'adapti a l'amplada del contenidor.
Utilitza unitats relatives per a la tipografia.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pàgina Responsiva</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 20px;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        html {
            font-size: 100%;
        }

        body {
            font-size: 1rem;
        }

        h1 {
            font-size: 2rem;
        }

        p {
            font-size: 1rem;
        }

        @media (max-width: 768px) {
            body {
                font-size: 0.875rem; /* 14px */
            }

            h1 {
                font-size: 1.75rem; /* 28px */
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 0.75rem; /* 12px */
            }

            h1 {
                font-size: 1.5rem; /* 24px */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Pàgina Responsiva</h1>
        <p>Aquesta pàgina s'adapta a diferents mides de pantalla.</p>
        <img src="imatge.jpg" alt="Exemple d'imatge responsiva">
    </div>
</body>
</html>

Conclusió

El disseny responsiu és essencial per crear llocs web moderns que funcionin bé en qualsevol dispositiu. Utilitzant dissenys fluids, consultes de mitjans, imatges responsives i tipografia adaptativa, podem assegurar-nos que els nostres llocs web siguin accessibles i agradables per a tots els usuaris. En els següents temes, aprofundirem en tècniques específiques per implementar un disseny responsiu de manera efectiva.

Introducció al Disseny Responsiu

Objectius del Disseny Responsiu

Principis del Disseny Responsiu

Exemples Pràctics

Disseny Fluid

Consultes de Mitjans

Imatges Responsives

Tipografia Responsiva

Exercici Pràctic

Objectiu

Instruccions

Solució

Conclusió

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