Tata letak cairan elastis CSS memenuhi tampilan konten yang berbeda

Saat ini, seiring dengan semakin besarnya ukuran monitor pengguna, tata letak lebar padat 1024*768 sebelumnya menjadi semakin ketinggalan jaman. Bagi pengguna dengan layar besar, ruang kosong di kedua sisi memberikan kesan serius pada pandangan pertama sia-sia, sebagai desainer web Anda memiliki tanggung jawab untuk memberikan antarmuka pengguna yang baik kepada kelompok pengguna ini.

Tentu saja, untuk mengurangi pemborosan layar ini, menggunakan tata letak cairan elastis adalah solusi terbaik yang dapat memanfaatkan ruang layar sepenuhnya dan menampilkan konten dalam layar penuh, berapa pun resolusi Anda. Namun, karena berbagai keterbatasan, halaman web saat ini belum siap untuk sepenuhnya mengadopsi tata letak elastis yang lancar (terutama produsen browser yang menginjak-injak standar secara sembarangan dan dukungan yang tidak lengkap untuk standar CSS, dll.). Sebagai perantara antara pengguna dan produsen, kami hanya bisa beradaptasi dengan kesenjangan antara keduanya dengan mentalitas yang kompatibel. Oleh karena itu, sebagai solusi transisi, ada tata letak seperti itu: tata letak elastis + lebar tetap.

Elastisitas yang disebutkan di sini berarti latar belakang menyesuaikan dengan lebar layar, sedangkan lebar tetap berarti konten teks dapat dipusatkan secara otomatis di layar lebar atau layar sempit. Bertahan dalam celah untuk memenuhi kebutuhan pengguna dengan ukuran resolusi berbeda. Desain yang ditunjukkan di bawah ini adalah contoh tipikal.

Tanpa basa-basi lagi, mari kita mulai membuat struktur tata letak seperti ini.

Pertama, bangun lapisan struktur:

Menganalisis lapisan struktural. Sebuah halaman web umumnya mencakup tiga bagian: header, area konten, dan footer. Kita meletakkan header dan konten dalam lapisan penampung, bernama wrapper, dan memisahkan footer, bernama wrapper. Mengapa didesain seperti ini? Kami ingin footer ini benar-benar berada di bawah meskipun area kontennya kurang dari satu layar.

Kami mengatur lebar kedua container, wrapper dan footer, menjadi 100% sehingga secara otomatis beradaptasi dengan lebar layar. Dan atur juga area header menjadi lebar 100%. Dengan cara ini, kita bisa menyisipkan gambar yang bisa di-tile secara horizontal di header dan footer, sehingga latar belakang header dan footer bisa memenuhi seluruh ruang layar secara horizontal di layar besar.

Sedangkan untuk konten teks utama, pendekatan umum kami adalah menampilkannya di tengah ketika resolusinya lebih besar, menyisakan ruang kosong di kedua sisi. Karena area header telah disetel ke lebar 100%, kami menambahkan lapisan kontainer lain di header, yang berfungsi sebagai pembawa konten teks header sebenarnya. Kami kemudian menetapkan nilai lebar tetap untuknya, misalnya lebar 960 piksel dan biarkan ia terpusat dengan sendirinya.

Dengan cara ini, teks utama header halaman mengapung di lapisan atas haeader efek header, yang secara otomatis dapat menyesuaikan resolusi layar yang lebih besar.

Dengan cara yang sama, footer juga dapat diimplementasikan menggunakan metode ini.

Pada layer struktural di atas, saya tidak menggunakan cara ini pada area konten tengah, namun melakukan sedikit perubahan. Kita dapat melihat bahwa pada area konten, tidak ada container yang tertanam, melainkan hanya satu container. Apa yang harus kita lakukan jika kita ingin mencegah kedua sisi teks tampak kosong pada resolusi tinggi? Tentu saja, Anda dapat menggunakan metode header dan footer dan menambahkan div ke kontennya. Tentu saja, untuk mengurangi penumpukan, kita bisa menggunakan solusi. Kita dapat menambahkan gambar yang sangat besar ke latar belakang badan dan menggunakan posisi latar belakang untuk memposisikan dan memusatkan gambar sehingga gambar di kedua sisi area konten ditampilkan.

Blog ini adalah kasus khusus. Jika Anda melihat gambar di kedua sisi blog ini dengan resolusi tinggi dan kemudian memperkecil jendelanya, Anda dapat melihat bahwa hanya sebagian kecil gambar di kedua sisi yang ditampilkan pada 1024* 768, sedangkan teks utama selalu ditampilkan di tengah.

Untuk mendemonstrasikan efeknya, kami menambahkan beberapa penyesuaian warna lainnya, dan gaya akhirnya adalah sebagai berikut: