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

Patrons Responsius Comuns

Següent ►
►

En aquesta secció, explorarem alguns dels patrons de disseny responsiu més comuns que s'utilitzen per crear llocs web que s'adapten a diferents mides de pantalla i dispositius. Aquests patrons ajuden a garantir que el contingut sigui accessible i fàcil de llegir, independentment del dispositiu que s'utilitzi.

  1. Patró de Columna Fluida

Descripció

  • El patró de columna fluida utilitza un disseny de columna única que s'adapta a l'amplada de la pantalla.
  • És ideal per a dispositius mòbils, on l'espai és limitat.

Implementació

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
    <title>Patró de Columna Fluida</title>
</head>
<body>
    <div class="container">
        <h1>Benvingut al nostre lloc web</h1>
        <p>Aquest és un exemple de patró de columna fluida.</p>
    </div>
</body>
</html>

Explicació

  • Utilitzem width: 100% per assegurar-nos que la columna ocupi tota l'amplada disponible.
  • box-sizing: border-box s'utilitza per incloure el padding i el border dins de l'amplada total de l'element.

  1. Patró de Graella

Descripció

  • El patró de graella divideix el contingut en múltiples columnes i files.
  • És útil per a pantalles més grans, com les de tauletes i ordinadors.

Implementació

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .grid-item {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
    </style>
    <title>Patró de Graella</title>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Element 1</div>
        <div class="grid-item">Element 2</div>
        <div class="grid-item">Element 3</div>
        <div class="grid-item">Element 4</div>
    </div>
</body>
</html>

Explicació

  • grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) crea una graella flexible que s'adapta a l'amplada de la pantalla.
  • gap: 10px afegeix espai entre els elements de la graella.

  1. Patró de Barra Lateral

Descripció

  • Aquest patró inclou una barra lateral que pot contenir navegació o informació addicional.
  • Sovint es col·loca a l'esquerra o a la dreta del contingut principal.

Implementació

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .sidebar-layout {
            display: flex;
            flex-wrap: wrap;
        }
        .sidebar {
            flex: 1;
            min-width: 200px;
            background-color: #e0e0e0;
            padding: 20px;
        }
        .main-content {
            flex: 3;
            min-width: 300px;
            padding: 20px;
        }
    </style>
    <title>Patró de Barra Lateral</title>
</head>
<body>
    <div class="sidebar-layout">
        <div class="sidebar">Barra Lateral</div>
        <div class="main-content">Contingut Principal</div>
    </div>
</body>
</html>

Explicació

  • Utilitzem display: flex per crear un disseny flexible que s'adapta a diferents mides de pantalla.
  • flex: 1 i flex: 3 determinen la proporció d'espai que ocupa cada secció.

Exercici Pràctic

Objectiu: Implementar un disseny responsiu que utilitzi el patró de graella per mostrar una galeria d'imatges.

Instruccions

  1. Crea un document HTML amb una estructura de graella.
  2. Afegeix imatges a cada element de la graella.
  3. Assegura't que la graella sigui responsiva i s'adapti a diferents mides de pantalla.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
        }
        .gallery-item {
            overflow: hidden;
        }
        .gallery-item img {
            width: 100%;
            height: auto;
        }
    </style>
    <title>Galeria Responsiva</title>
</head>
<body>
    <div class="gallery">
        <div class="gallery-item"><img src="image1.jpg" alt="Imatge 1"></div>
        <div class="gallery-item"><img src="image2.jpg" alt="Imatge 2"></div>
        <div class="gallery-item"><img src="image3.jpg" alt="Imatge 3"></div>
        <div class="gallery-item"><img src="image4.jpg" alt="Imatge 4"></div>
    </div>
</body>
</html>

Explicació

  • grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) assegura que les imatges s'ajustin automàticament a l'amplada disponible.
  • Les imatges s'ajusten a la mida de la graella gràcies a width: 100% i height: auto.

Conclusió

Els patrons responsius comuns són fonamentals per crear llocs web que s'adaptin a qualsevol dispositiu. Aquests patrons proporcionen una base sòlida per al disseny responsiu i poden ser combinats i modificats per satisfer les necessitats específiques de cada projecte. En el següent tema, explorarem el disseny Mobile-First, una estratègia clau per al desenvolupament web modern.

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