Pelajari bagaimana browser web menentukan tampilan menggunakan nilai persentase
Banyak siswa desain web responsif memiliki waktu yang sulit menggunakan persentase untuk nilai lebar. Secara khusus, ada kebingungan dengan bagaimana browser menghitung persentase tersebut. Di bawah ini Anda akan menemukan penjelasan rinci tentang bagaimana persentase bekerja untuk perhitungan lebar di situs web responsif.
Menggunakan Piksel untuk Nilai Lebar
Ketika Anda menggunakan piksel sebagai nilai lebar, hasilnya sangat mudah. Jika Anda menggunakan CSS untuk menetapkan nilai lebar elemen di header dokumen hingga 100 piksel lebar, elemen itu akan menjadi ukuran yang sama dengan yang Anda tetapkan menjadi 100 piksel lebar di konten atau footer situs web atau area lain dari halaman. Piksel adalah nilai mutlak, jadi 100 piksel adalah 100 piksel di mana pun di dalam dokumen Anda, sebuah elemen muncul. Sayangnya, sementara nilai piksel mudah dimengerti, mereka tidak berfungsi dengan baik di situs web responsif.
Ethan Marcotte menciptakan istilah "desain web responsif", menjelaskan pendekatan ini sebagai mengandung 3 prinsip utama:
- Grid cairan
- Media cairan
- Kueri media
Dua titik pertama, grid cairan dan media fluida, dicapai dengan menggunakan persentase, bukan piksel, untuk ukuran nilai.
Menggunakan Persentase untuk Nilai Lebar
Ketika Anda menggunakan persentase untuk menetapkan lebar untuk suatu elemen, ukuran sebenarnya yang ditampilkan elemen tersebut akan bervariasi bergantung pada tempat di dalam dokumen. Persentase adalah nilai relatif, yang berarti ukuran yang ditampilkan relatif terhadap elemen lain dalam dokumen Anda.
Misalnya, jika Anda mengatur lebar gambar menjadi 50%, ini tidak berarti bahwa gambar akan ditampilkan setengah dari ukuran normalnya. Ini adalah kesalahpahaman umum.
Jika sebuah gambar memiliki lebar keseluruhan 600 piksel, maka menggunakan nilai CSS untuk menampilkannya pada 50% tidak berarti bahwa itu akan menjadi lebar 300 piksel di browser web. Nilai persentase ini dihitung berdasarkan elemen yang mengandung gambar itu, bukan ukuran asli gambar itu sendiri. Jika penampung (yang bisa berupa divisi atau elemen HTML lainnya) memiliki lebar 1000 piksel, maka gambar akan ditampilkan pada 500 piksel karena nilainya adalah 50% dari lebar penampung. Jika elemen yang berisi adalah 400 piksel lebar, maka gambar hanya akan ditampilkan pada 200 piksel, karena nilainya adalah 50% dari penampung. Gambar yang dipertanyakan di sini memiliki ukuran 50% yang sepenuhnya bergantung pada elemen yang memuatnya.
Ingat, desain responsif adalah cairan. Tata letak dan ukuran akan berubah seiring perubahan ukuran layar / perangkat . Jika Anda berpikir tentang hal ini secara fisik, non-web, itu seperti memiliki kotak kardus yang Anda isi dengan bahan pengepakan. Jika Anda mengatakan bahwa kotak itu harus diisi setengah dengan bahan itu, jumlah pengepakan yang Anda butuhkan akan bervariasi tergantung pada ukuran kotak. Hal yang sama berlaku untuk lebar persentase dalam desain web.
Persentase Berdasarkan Persentase Lainnya
Dalam contoh gambar / kontainer, saya menggunakan nilai piksel untuk elemen yang mengandung untuk menunjukkan bagaimana gambar responsif akan ditampilkan. Pada kenyataannya, elemen yang mengandung juga akan diatur ke persentase dan gambar, atau elemen lain, di dalam wadah itu akan mendapatkan nilainya berdasarkan persentase persentase.
Inilah contoh lain yang menunjukkan ini dalam praktek.
Katakanlah Anda memiliki situs web di mana seluruh situs terdapat dalam divisi dengan kelas "wadah" (praktik desain web yang umum). Di dalam divisi itu ada tiga divisi lain yang pada akhirnya akan Anda gaya untuk ditampilkan sebagai 3 kolom vertikal. HTML itu mungkin terlihat seperti ini:
Sekarang, Anda dapat menggunakan CSS untuk mengatur ukuran pembagian "wadah" untuk mengatakan 90%. Dalam contoh ini, divisi kontainer tidak memiliki elemen lain yang mengelilinginya selain dari tubuh, yang kita belum setel ke nilai tertentu. Secara default, tubuh akan ditampilkan sebagai 100% dari jendela browser. Oleh karena itu, persentase "wadah" pembagian akan didasarkan pada ukuran jendela browser. Karena jendela browser itu berubah ukurannya, begitu juga ukuran "wadah" ini. Jadi jika jendela browser memiliki lebar 2000 piksel, divisi ini akan ditampilkan pada 1800 piksel. Ini dihitung sebagai 90 persen dari 2000 (2000 x .90 = 1800)), yang merupakan ukuran browser.
Jika masing-masing divisi "col" ditemukan dalam "wadah" diatur ke ukuran 30%, maka masing-masing akan menjadi 540 piksel lebar dalam contoh ini. Ini dihitung sebagai 30% dari 1.800 piksel yang dibuat oleh wadah di (1800 x.30 = 540). Jika kami mengubah persentase penampung itu, pembagian batin ini juga akan berubah dalam ukuran yang mereka buat karena bergantung pada elemen yang mengandung itu.
Mari kita asumsikan bahwa jendela browser tetap lebar 2000 piksel, tetapi kami mengubah nilai persentase penampung menjadi 80%, bukan 90%. Itu berarti itu akan membuat lebar 1600 piksel sekarang (2000 x .80 = 1600). Bahkan jika kita tidak mengubah CSS untuk ukuran divisi “col” 3 kita, dan membiarkannya sebesar 30%, mereka akan berubah secara berbeda sekarang karena elemen yang mengandung, yang merupakan konteks ukurannya, telah berubah. Ke-3 divisi itu sekarang akan menjadi lebar 480 piksel, yaitu 30% dari 1600, atau ukuran wadah (1600 x .30 = 480).
Mengambil ini lebih jauh, jika ada gambar di dalam salah satu divisi "col" ini dan gambar itu berukuran menggunakan persentase, konteks untuk ukurannya akan menjadi "col" itu sendiri. Karena pembagian "col" itu berubah ukurannya, begitu pula gambar di dalamnya. Jadi jika ukuran browser atau "wadah" berubah, itu akan mempengaruhi tiga "col" divisi, yang pada gilirannya akan mengubah ukuran gambar di dalam "col." Seperti yang Anda lihat, ini semua terhubung saat itu datang ke nilai-nilai ukuran persentase-driven.
Saat Anda mempertimbangkan bagaimana elemen di dalam laman web akan ditampilkan ketika nilai persentase digunakan untuk lebarnya, Anda perlu memahami konteks tempat elemen itu berada di markup laman.
Kesimpulan
Persentase memainkan peran penting dalam membuat tata letak untuk situs web responsif . Apakah Anda mengukur gambar secara responsif atau menggunakan lebar persentase untuk membuat grid benar-benar cair yang ukurannya relatif satu sama lain, memahami perhitungan ini akan diperlukan untuk mencapai tampilan yang Anda inginkan.