Sebuah panel bisa menjadi sempit karena induknya berubah, meskipun jendela browser tidak. ResizeObserver melaporkan perubahan pada kotak konten elemen, sehingga komponen yang dapat digunakan kembali dapat bereaksi terhadap ruang yang tersedia.

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    entry.target.classList.toggle(
      "is-compact",
      entry.contentRect.width < 480,
    );
  }
});

observer.observe(card);

Amati hanya apa yang dibutuhkan komponen tersebut

  • Buat satu pengamat untuk elemen terkait, bukan satu pengamat untuk setiap anak kecil.
  • Berhenti mengamati elemen yang dipindahkan atau putuskan sambungan pengamat ketika pemiliknya telah dibuang.
  • Gunakan kueri penampung CSS jika perubahannya murni visual dan tidak memerlukan JavaScript.

Hindari putaran umpan balik pengubahan ukuran

Mengubah dimensi elemen yang diamati sebagai respons terhadap setiap pengukuran dapat memicu pengamatan lain. Gunakan ambang batas yang stabil dan hindari pengaturan ukuran yang berosilasi di sekitar ambang batas.

Uji dengan komponen di dalam wadah yang sempit dan lebar, tidak hanya dengan mengubah ukuran jendela browser secara keseluruhan.