0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
423 lines
8.2 KiB
Markdown
423 lines
8.2 KiB
Markdown
# 📱 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)
|
|
|
|
```css
|
|
@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)
|
|
|
|
```css
|
|
@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)
|
|
|
|
```css
|
|
@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
|
|
|
|
```html
|
|
<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
|
|
|
|
```css
|
|
@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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```css
|
|
@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)
|
|
|
|
```html
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<!-- Contenido -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
#### CSS Responsive
|
|
|
|
```css
|
|
@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
|
|
|
|
```html
|
|
<div class="container-fluid py-4" style="max-width: 1400px;">
|
|
<!-- Contenido -->
|
|
</div>
|
|
```
|
|
|
|
### CSS Responsive
|
|
|
|
```css
|
|
/* 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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```css
|
|
/* 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
|
|
|
|
```css
|
|
/* 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<!-- 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
|
|
|
|
```html
|
|
<!-- 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](README.md)
|