Tata letak cairan adalah jenis desain halaman web di mana tata letak halaman mengubah ukuran saat ukuran jendela diubah.
Ini dilakukan dengan mendefinisikan area halaman menggunakan persentase alih-alih lebar piksel tetap.
Sebagian besar tata letak halaman web termasuk satu, dua, atau tiga kolom.
Pada hari-hari awal desain web, ketika sebagian besar pengguna memiliki ukuran layar yang sama, pengembang web akan menetapkan kolom yang tetap lebar.
Misalnya, tata letak tetap dapat mencakup area konten utama yang selebar 960px dengan tiga kolom yang memiliki lebar 180px, 600px, dan 180px.
Meskipun tata letak ini mungkin terlihat bagus di layar 1024×768, mungkin terlihat kecil di layar 1920×1080 dan tidak akan muat pada layar 800×600.
Tata letak cairan menyelesaikan masalah ini dengan menggunakan persentase untuk menentukan setiap area tata letak.
Misalnya, alih-alih membuat area konten 960px, pengembang web dapat membuat tata letak yang mengisi 80% layar dan tiga kolom dapat memakan 18%, 64%, dan 18% masing-masing.
Dengan menggunakan persentase, konten dapat berkembang atau menyusut agar sesuai dengan jendela komputer pengguna.
CSS yang digunakan untuk membuat tata letak tetap vs tata letak fluida ditunjukkan di bawah ini.
Kelas CSS dalam contoh masing-masing dapat ditugaskan ke div dalam html halaman di mana.
Kelas.
Kelas konten juga bisa ditugaskan ke tabel dan kelas lain dapat ditugaskan ke sel tabel.
Lebar tetap.
Istilah “tata letak cairan” dan “desain web responsif” kadang-kadang digunakan secara bergantian, tetapi mereka adalah dua hal yang berbeda.
Halaman yang dibuat menggunakan desain web responsif mencakup kueri media CSS, yang memuat gaya berbeda tergantung pada lebar jendela atau jenis perangkat yang digunakan untuk mengakses halaman.
Desain web yang responsif membutuhkan lebih banyak CSS (dan kadang-kadang JavaScript) daripada tata letak cairan dasar, tetapi juga memberikan lebih banyak kontrol atas tata letak halaman.
