roi-theme/_planificacion/01-design-system/10-RESPONSIVE-DESIGN.md

📱 RESPONSIVE DESIGN

Breakpoints de Bootstrap

Breakpoint	Min Width	Dispositivo	Uso en Admin Panel
xs	0px	Móvil pequeño	Stack vertical, padding reducido
sm	576px	Móvil grande	Stack vertical
md	768px	Tablet	Stack vertical
lg	992px	Desktop	Grid 2 columnas activo
xl	1200px	Desktop grande	Grid 2 columnas
xxl	1400px	Desktop XL	Grid 2 columnas

---

Media Queries

Mobile (<576px)

@media (max-width: 575px) {
    /* Header del Tab: reducir tamaño de título */
    .tab-header h3 {
        font-size: 1rem;
    }

    /* Cards: reducir padding */
    .form-section.card .card-body {
        padding: 0.75rem !important;
    }

    /* Container: reducir padding lateral */
    .container-fluid {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Botones: full width */
    .tab-header button {
        width: 100%;
        margin-top: 0.5rem;
    }
}

Tablet (576px - 991px)

@media (max-width: 991px) {
    /* Header del Tab: reducir padding */
    .tab-header {
        padding: 0.75rem;
    }

    /* Título: tamaño medio */
    .tab-header h3 {
        font-size: 1.1rem;
    }

    /* Grid: todavía en stack vertical */
}

Desktop (≥992px)

@media (min-width: 992px) {
    /* Grid de 2 columnas activo */
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    /* Espaciado normal */
}

---

Patrones Responsive

Header del Tab

HTML Responsive

<div class="rounded p-4 mb-4 shadow text-white"
     style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%);">
    <!-- flex-wrap permite que el botón baje en mobile -->
    <!-- gap-3 mantiene espaciado consistente -->
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h3 class="h4 mb-1 fw-bold">Título</h3>
            <p class="mb-0 small">Descripción</p>
        </div>
        <button class="btn btn-sm btn-outline-light">Botón</button>
    </div>
</div>

CSS Responsive

@media (max-width: 576px) {
    /* El botón baja automáticamente con flex-wrap */
    /* gap-3 mantiene el espaciado */

    /* Opcional: hacer botón full-width */
    .tab-header button {
        width: 100%;
    }

    /* Reducir padding del header */
    .tab-header {
        padding: 0.75rem !important;
    }
}

---

Grid de 2 Columnas

HTML Responsive

<div class="row g-3">
    <!-- col-lg-6: 2 columnas en desktop (≥992px) -->
    <!-- Stack vertical automático en mobile/tablet (<992px) -->
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>
    <div class="col-lg-6">
        <!-- Cards de configuración -->
    </div>
</div>

Comportamiento:

• Desktop (≥992px): 2 columnas lado a lado
• Mobile/Tablet (<992px): Stack vertical automático
• Gap: 1rem (16px) entre elementos

---

Botones de Vista Previa

HTML Responsive

<div class="btn-group btn-group-sm" role="group">
    <button type="button" class="btn btn-outline-secondary active">
        <i class="bi bi-display"></i> Desktop
    </button>
    <button type="button" class="btn btn-outline-secondary">
        <i class="bi bi-phone"></i> Mobile
    </button>
</div>

CSS Responsive

@media (max-width: 576px) {
    /* Reducir tamaño de botones en mobile */
    .btn-group.btn-group-sm .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Opcional: full width */
    .btn-group.btn-group-sm {
        width: 100%;
    }
}

---

Cards

HTML Responsive (Automático)

<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
    <div class="card-body">
        <!-- Contenido -->
    </div>
</div>

CSS Responsive

@media (max-width: 575px) {
    /* Reducir padding en cards */
    .card-body {
        padding: 0.75rem !important;
    }

    /* Reducir margen entre cards */
    .card {
        margin-bottom: 0.75rem !important;
    }
}

---

Contenedor Principal

HTML

<div class="container-fluid py-4" style="max-width: 1400px;">
    <!-- Contenido -->
</div>

CSS Responsive

/* Desktop: ancho máximo 1400px */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1400px;
    }
}

/* Tablet: ancho completo con padding */
@media (max-width: 991px) {
    .container-fluid {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* Mobile: padding reducido */
@media (max-width: 575px) {
    .container-fluid {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}

---

Vista Previa Responsive

Simular Mobile en Preview

const btnMobile = document.getElementById('previewMobile');
const preview = document.getElementById('componentPreview');

btnMobile.addEventListener('click', function() {
    // Simular ancho mobile (375px - iPhone SE)
    preview.style.maxWidth = '375px';
    preview.style.margin = '0 auto';

    // Opcional: agregar border para visualizar límites
    preview.style.border = '1px solid #e9ecef';
});

Simular Desktop en Preview

const btnDesktop = document.getElementById('previewDesktop');
const preview = document.getElementById('componentPreview');

btnDesktop.addEventListener('click', function() {
    // Restaurar ancho completo
    preview.style.maxWidth = '100%';
    preview.style.margin = '0';

    // Remover border
    preview.style.border = 'none';
});

---

Anchos de Referencia para Dispositivos

Dispositivo	Ancho (px)	Uso en Preview
iPhone SE	375	Mobile pequeño
iPhone 12/13	390	Mobile estándar
iPhone 14 Pro Max	430	Mobile grande
iPad Mini	768	Tablet
iPad Pro	1024	Tablet grande
Desktop	1200+	Desktop estándar

---

Tipografía Responsive

Headers

/* Desktop: tamaño completo */
@media (min-width: 992px) {
    .tab-header h3 {
        font-size: 1.5rem; /* 24px */
    }

    .card-title {
        font-size: 1rem; /* 16px */
    }
}

/* Tablet: tamaño reducido */
@media (max-width: 991px) {
    .tab-header h3 {
        font-size: 1.1rem; /* 17.6px */
    }
}

/* Mobile: tamaño mínimo */
@media (max-width: 575px) {
    .tab-header h3 {
        font-size: 1rem; /* 16px */
    }

    .card-title {
        font-size: 0.9rem; /* 14.4px */
    }
}

---

Espaciado Responsive

Padding

/* Desktop: padding completo */
@media (min-width: 992px) {
    .tab-header {
        padding: 1.5rem; /* 24px */
    }

    .card-body {
        padding: 1rem; /* 16px */
    }
}

/* Mobile: padding reducido */
@media (max-width: 575px) {
    .tab-header {
        padding: 0.75rem !important; /* 12px */
    }

    .card-body {
        padding: 0.75rem !important; /* 12px */
    }
}

---

Utilidades de Bootstrap para Responsive

Display

<!-- Ocultar en mobile, mostrar en desktop -->
<div class="d-none d-lg-block">Solo en desktop</div>

<!-- Mostrar en mobile, ocultar en desktop -->
<div class="d-lg-none">Solo en mobile</div>

<!-- Mostrar en todos los tamaños -->
<div class="d-block">Siempre visible</div>

Flex Direction

<!-- Columna en mobile, fila en desktop -->
<div class="d-flex flex-column flex-lg-row">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Text Alignment

<!-- Centrado en mobile, izquierda en desktop -->
<p class="text-center text-lg-start">Texto</p>

---

Testing Responsive

Checklist

• Probar en mobile (<576px)
• Probar en tablet (768px)
• Probar en desktop (≥992px)
• Header del tab se adapta correctamente
• Grid de 2 columnas se convierte en stack vertical
• Cards mantienen legibilidad
• Botones no se cortan
• Vista previa funciona en todos los tamaños

Herramientas

1. Chrome DevTools: F12 → Toggle Device Toolbar (Ctrl+Shift+M)
2. Firefox Responsive Design Mode: F12 → Toggle Responsive Design Mode
3. Dispositivos reales: Probar en iPhone, iPad, Android

---

Volver al Índice

← Volver al README