El Atributo ONRESIZE

El evento onresize se dispara cuando se cambia el tamaño de la ventana del navegador o de un elemento específico.

El evento onresize se dispara cuando se cambia el tamaño de la ventana del navegador o de un elemento específico. Es esencial para crear diseños responsivos y adaptar contenido dinámicamente.

???? Sintaxis básica

<!-- En la ventana del navegador -->
<body onresize="manejarResize()">

<!-- En un elemento específico (requiere JavaScript moderno) -->
<div id="miElemento"></div>

<script>
  // Método 1: Usando atributo HTML
  function manejarResize() {
    console.log("¡Ventana redimensionada!");
  }

  // Método 2: Usando JavaScript (recomendado)
  window.addEventListener("resize", () => {
    // Código aquí
  });

  // Para elementos (con ResizeObserver)
  const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
      console.log("Nuevo tamaño:", entry.contentRect);
    });
  });
  observer.observe(document.getElementById("miElemento"));
</script>

Run HTML

???? Conceptos clave

window.onresize: Detecta cambios en el tamaño de la ventana.
ResizeObserver: API moderna para observar cambios en elementos específicos.
Propiedades útiles:
- window.innerWidth: Ancho de la ventana.
- window.innerHeight: Alto de la ventana.
- element.offsetWidth: Ancho de un elemento.
- element.offsetHeight: Alto de un elemento.

???? Ejemplos prácticos

1. Monitor de dimensiones en tiempo real

<div id="dimensiones"></div>

<script>
  window.addEventListener("resize", () => {
    const ancho = window.innerWidth;
    const alto = window.innerHeight;
    document.getElementById("dimensiones").innerHTML = `
      Ancho: ${ancho}px | Alto: ${alto}px
    `;
  });
</script>

Run HTML

2. Menú responsivo

<nav id="menu">
  <a href="#">Inicio</a>
  <a href="#">Servicios</a>
  <a href="#">Contacto</a>
</nav>

<script>
  function actualizarMenu() {
    const menu = document.getElementById("menu");
    if (window.innerWidth < 768) {
      menu.style.flexDirection = "column";
    } else {
      menu.style.flexDirection = "row";
    }
  }
  window.addEventListener("resize", actualizarMenu);
</script>

<style>
  #menu {
    display: flex;
    gap: 20px;
    transition: 0.3s;
  }
</style>

Run HTML

3. Galería de imágenes adaptable

<div id="galeria"></div>

<script>
  function actualizarGaleria() {
    const galeria = document.getElementById("galeria");
    const anchoVentana = window.innerWidth;
    const columnas = Math.floor(anchoVentana / 200); // 200px por columna
    
    galeria.style.gridTemplateColumns = `repeat(${columnas}, 1fr)`;
  }
  window.addEventListener("resize", actualizarGaleria);
</script>

<style>
  #galeria {
    display: grid;
    gap: 10px;
    padding: 20px;
  }
</style>

Run HTML

???? Casos de uso avanzados

1. Observador de elementos

const elementoObservado = document.getElementById("grafico");
const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    dibujarGrafico(entry.contentRect.width);
  });
});
observer.observe(elementoObservado);

2. Optimización de rendimiento con debounce

let timeoutId;
window.addEventListener("resize", () => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    // Código que se ejecuta después de 200ms sin cambios
    actualizarLayout();
  }, 200);
});

3. Cambio de tema dinámico

window.addEventListener("resize", () => {
  const ancho = window.innerWidth;
  document.body.className = ancho > 1200 ? "tema-wide" : "tema-normal";
});

⚠️ Consideraciones importantes

Rendimiento:
- Evita cálculos costosos dentro del evento.
- Usa requestAnimationFrame para actualizaciones visuales:
  javascript
  
  Copy
```
window.addEventListener("resize", () => {
  requestAnimationFrame(actualizarPosiciones);
});
```
Compatibilidad:
- ResizeObserver requiere polyfill para IE11.
- window.onresize funciona en todos los navegadores modernos.
Dispositivos móviles:
- El teclado virtual puede activar eventos de resize.
- Usa window.visualViewport para mejor precisión:
  javascript
  
  Copy
```
window.visualViewport.addEventListener("resize", manejarResizeMovil);
```

???? Errores comunes

Olvidar remover listeners:

// Mal
window.addEventListener("resize", () => { ... });

// Bien (para SPA)
const handler = () => { ... };
window.addEventListener("resize", handler);
window.removeEventListener("resize", handler); // Cuando ya no se necesite

Actualizar el DOM repetidamente:

// Usar flag para evitar actualizaciones innecesarias
let necesitaActualizar = false;
window.addEventListener("resize", () => {
  if (!necesitaActualizar) {
    necesitaActualizar = true;
    requestAnimationFrame(() => {
      actualizarUI();
      necesitaActualizar = false;
    });
  }
});

???? Conclusión

El atributo onresize es clave para:

Crear interfaces adaptativas
Optimizar el rendimiento en diferentes dispositivos
Implementar animaciones responsivas
Mejorar la experiencia de usuario

Ejemplo final avanzado (Canvas responsive):

<canvas id="lienzo"></canvas>

<script>
  const canvas = document.getElementById("lienzo");
  const ctx = canvas.getContext("2d");

  function configurarCanvas() {
    canvas.width = window.innerWidth * 0.8;
    canvas.height = window.innerHeight * 0.6;
    dibujarContenido();
  }

  function dibujarContenido() {
    // Lógica de dibujo adaptada al tamaño actual
  }

  window.addEventListener("resize", configurarCanvas);
  configurarCanvas(); // Inicializar
</script>

Run HTML

Con estos conceptos, podrás crear aplicaciones web que se adapten perfectamente a cualquier tamaño de pantalla. ¡Experimenta y lleva tu responsive design al siguiente nivel!