Paket Tata Letak Halaman Web: Tata Letak Cairan Elastis

Dalam artikel lain dalam artikel saya "elastis + tata letak lebar tetap", saya memperkenalkan rencana tata letak dengan elastis ditambah lebar tetap minimum, dan sekarang saya akan memperkenalkan rencana tata letak lain - tata letak cairan elastis.

Solusi itu sebenarnya adalah aplikasi yang fleksibel dari tata letak ini. Keuntungan terbesar dari tata letak elastis adalah dapat memanfaatkan ruang layar sepenuhnya. Tidak peduli seberapa besar resolusi klien, ia dapat secara otomatis beradaptasi dengan perubahan lebar.

Gambar 1

Lihatlah gambar di atas. Ini adalah situs web asing. Ini adalah tata letak lebar tetap. Tata letak kami didasarkan pada gambar ini. Tentu saja, saya tidak akan memberikan pengantar komprehensif tentang cara membuat halaman lengkap ini, saya hanya akan menjelaskannya ke poin -poin utama.

Faktanya, relatif sederhana untuk membuat tata letak elastis, tetapi meskipun tata letak ini sederhana, pemahaman detail adalah inti dari tata letak ini. Meskipun tata letak elastis memiliki keunggulan yang baik, ia memiliki kelemahan yang relatif fatal:

1. Jika Anda tidak menetapkan lebar minimum untuk tata letak ini, itu akan memiliki dampak fatal pada tata letak ketika pengguna menyusut jendela menjadi yang cukup kecil. Menyebabkan dampak serius pada ketidaksejajaran tata letak.
2. Ketika sebuah halaman diletakkan secara elastis, itu akan berdampak besar pada gambar di dalamnya. Karena sejauh ini, masalah penskalaan gambar dengan persentase belum diselesaikan.

   Oleh karena itu, artikel ini mungkin memiliki penjelasan yang relatif lebih sedikit tentang tata letak, dan ini lebih tentang menyelesaikan dua masalah di atas. Saya percaya bahwa selama dua masalah di atas diselesaikan, tata letak ini akan relatif lebih mudah.

Secara umum, tata letak elastis menggunakan persentase untuk mengatur lebar wadah. Ini akan secara otomatis beradaptasi dengan lebar layar. Namun, nilai lebar tidak dapat sepenuhnya ditingkatkan secara bebas oleh pengguna. Kita harus membatasi lebar minimumnya dalam lebar persentase ini. Ketika pengguna menyusut jendela ke nilai tertentu, jendela tidak akan diskalakan lagi.

Teman yang akrab dengan CSS tahu bahwa ada empat atribut seperti ini:

• Min-lebar: Lebar minimum
• Max-Width: Lebar maksimum
• Min-height: Tinggi minimum
• Max-Height: Tinggi maksimum

Keempat atribut ini hanya dapat menyelesaikan masalah ini. Apakah kamu bahagia? Tapi jangan sibuk. Meskipun mereka dapat menyelesaikan masalah ini, ada masalah serius. Browser IE6, yang paling banyak digunakan oleh pengguna, tidak mendukung atribut ini. Ini adalah hal yang sangat buruk. Kami tidak dapat membuang browser dengan sebagian besar pengguna!

Ada empat metode populer di internet untuk menyelesaikan masalah yang IE6 mendukung keempat atribut ini:

1. Ekspresi dalam CSS untuk mengatur lebar minimum, yang harganya lebih banyak memori.
2. Gunakan Divs bersarang dan kemudian gunakan imitasi offset margin untuk mengimplementasikan, struktur multi-redundan.
3. Diimplementasikan dengan JQ Framework dan menambahkan kerangka kerja JS ke properti sedikit tidak menguntungkan.
4. Diimplementasikan dengan kode JS murni.

Tiga yang pertama memiliki kelemahan, pilih metode yang paling cocok. Saya lebih suka yang terakhir. Ini dicapai oleh orang asing yang hebat. Anda dapat melihat contoh yang relevan di sini: http://www.doxdesk.com/software/js/minmax.html

Dengan file JS ini, Anda hanya perlu memanggil file JS ini di header.

PS: Untuk kenyamanan dalam model demonstrasi, saya menyebutnya JS sebagai referensi internal. Dalam aplikasi yang sebenarnya, Anda akan membuat file JS ini ke dalam file eksternal JS, dan menyebutnya sebagai berikut:

<type skrip = teks/javascript src = minmax.js> </script>

Kami hanya menerapkan Min-lebar untuk dua wadah #Wrapper dan #Footer di Lembar Gaya, dan mengatur lebarnya masing-masing menjadi 100%. OKE. Sekarang kami telah memecahkan masalah lebar minimum.