Definisi Fluid Layout

Apa Itu Fluid Layout? Penjelasan Mengenai Fluid Layout

Tata letak fluida adalah jenis desain webpage di mana tata letak halaman berubah ukuran sebagai window ukuran diubah. Hal ini dilakukan dengan mendefinisikan area halaman menggunakan persentase bukan pixel lebar.

Sebagian besar tata letak halaman web mencakup 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 lebar tetap. Misalnya, tata letak tetap dapat mencakup area konten utama yang lebarnya 960px dengan tiga kolom yang memiliki lebar 180px, 600px, dan 180px. Meskipun tata letak ini mungkin terlihat bagus pada layar 1024×768, mungkin terlihat kecil pada layar 1920×1080 dan tidak akan muat pada layar 800×600.

Tata letak fluida memecahkan 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 ketiga kolom tersebut masing-masing dapat mengambil 18%, 64%, dan 18%. Dengan menggunakan persentase, konten dapat memperluas atau menyusut agar sesuai dengan jendela komputer pengguna. CSS digunakan untuk membuat tata letak tetap vs tata letak fluida ditunjukkan di bawah ini.

Fixed Fluid Layout
. content { lebar: 960px; }

. kiri, . kanan { lebar: 180px; }

. middle { lebar: 600px; }

. content { lebar: 80%; }

. kiri, . kanan { lebar: 18%; }

. middle { lebar: 64%; }

Kelas CSS dalam contoh masing-masing dapat ditugaskan ke div dalam halaman HTML di mana . left, . right, dan . middle classes tercakup dalam kelas . content. Kelas konten juga bisa ditetapkan ke tabel dan kelas lainnya dapat ditetapkan ke sel tabel. Kelas . content lebar tetap tidak memerlukan lebar yang ditentukan karena secara otomatis mencakup lebar div tertutup atau sel tabel.

Tata Letak Fluida vs Desain Responsif

Istilah “tata letak fluida” 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 yang berbeda tergantung pada lebar jendela atau jenis perangkat yang digunakan untuk mengakses halaman. Desain web responsif membutuhkan lebih banyak CSS (dan kadang-kadang JavaScript) daripada tata letak fluida dasar, tetapi juga memberikan kontrol lebih besar atas tata letak halaman.

Deskripsi istilah Fluid Layout pada halaman ini adalah definisi asli dari SharTec.eu.
Tujuan dari SharTec.eu adalah untuk menjelaskan terminologi komputer dengan cara yang mudah dimengerti. Kami berusaha untuk kesederhanaan dan akurasi dalam setiap definisi yang kami publikasikan. Jika Anda memiliki komentar tentang deskripsi Tata Letak Fluida atau ingin menyarankan istilah teknis baru, silakan hubungi kami.