Ketahui bagaimana penyemak imbas web menentukan paparan menggunakan nilai peratusan
Ramai pelajar reka bentuk web responsif mempunyai masa yang sukar menggunakan peratusan untuk nilai lebar. Khususnya, terdapat kekeliruan dengan cara penyemak imbas mengira peratusan tersebut. Di bawah ini anda akan dapati penjelasan terperinci tentang bagaimana peratusan berfungsi untuk pengiraan lebar dalam laman web yang responsif.
Menggunakan Pixel untuk Nilai Lebar
Apabila anda menggunakan piksel sebagai nilai lebar, hasilnya sangat mudah. Jika anda menggunakan CSS untuk menetapkan nilai lebar elemen dalam tajuk dokumen hingga 100 piksel, elemen itu akan menjadi saiz yang sama dengan yang anda tetapkan hingga 100 piksel lebar di kandungan atau footer laman web atau kawasan lain halaman. Piksel adalah nilai mutlak, jadi 100 piksel adalah 100 piksel tidak kira di mana dalam dokumen anda terdapat elemen. Malangnya, sementara nilai piksel mudah difahami, mereka tidak berfungsi dengan baik di laman web yang responsif.
Ethan Marcotte membentuk istilah "reka bentuk web responsif", menerangkan pendekatan ini sebagai mengandungi 3 prinsipal utama:
- Sebuah grid bendalir
- Media cecair
- Pertanyaan media
Kedua-dua mata pertama, grid bendalir dan media cecair, dicapai dengan menggunakan peratusan, bukannya piksel, untuk nilai ukuran.
Menggunakan Peratusan untuk Nilai Lebar
Apabila anda menggunakan peratusan untuk menubuhkan lebar untuk elemen, ukuran sebenar yang memaparkan elemen pada akan berbeza bergantung pada di mana ia berada dalam dokumen. Peratusan adalah nilai relatif, artinya saiz yang dipaparkan adalah relatif terhadap elemen lain dalam dokumen anda.
Contohnya, jika anda menetapkan lebar imej kepada 50%, ini tidak bermakna imej akan dipaparkan pada separuh saiz normalnya. Ini adalah salah faham yang biasa.
Jika imej bersifat asli 600 piksel, kemudian menggunakan nilai CSS untuk memaparkannya pada 50% tidak bermakna ia akan menjadi 300 piksel lebar dalam pelayar web. Nilai peratusan ini dikira berdasarkan elemen yang mengandungi imej itu, bukan saiz asli imej itu sendiri. Jika bekas (yang boleh menjadi pembahagian atau beberapa elemen HTML yang lain) adalah 1000 piksel lebar, maka imej akan dipaparkan pada 500 piksel kerana nilai itu adalah 50% dari lebar kontena. Jika elemen yang mengandungi 400 piksel lebar, maka imej hanya akan dipaparkan pada 200 piksel, kerana nilai itu adalah 50% dari bekas. Imej yang dipersoalkan di sini mempunyai saiz 50% yang bergantung sepenuhnya kepada unsur yang mengandunginya.
Ingat, reka bentuk responsif adalah cecair. Susun atur dan saiz akan berubah apabila saiz skrin / peranti berubah . Jika anda berfikir tentang hal ini dalam istilah fizikal, bukan web, ia seperti mempunyai kotak kadbod yang anda sedang mengisi dengan bahan pembungkus. Sekiranya anda mengatakan bahawa kotak itu sepatuhnya dipenuhi dengan bahan tersebut, jumlah pembungkusan yang anda perlukan akan berbeza bergantung pada saiz kotak. Perkara yang sama berlaku untuk lebar peratusan dalam reka bentuk web.
Peratusan Berdasarkan Peratusan Lain
Dalam contoh imej / bekas, saya menggunakan nilai piksel untuk unsur yang mengandungi untuk menunjukkan bagaimana imej responsif akan dipaparkan. Pada hakikatnya, elemen yang mengandungi juga akan ditetapkan kepada peratusan dan imej, atau unsur-unsur lain, di dalam bekas itu akan memperoleh nilai berdasarkan peratusan peratusan.
Berikut adalah contoh lain yang memperlihatkan ini dalam amalan.
Katakan anda mempunyai laman web di mana seluruh laman web tersebut terkandung di dalam bahagian dengan kelas "kontena" (amalan reka bentuk web biasa). Di dalam bahagian itu terdapat tiga bahagian lain yang akhirnya anda akan dipaparkan sebagai 3 lajur menegak. HTML itu kelihatan seperti ini:
Sekarang, anda boleh menggunakan CSS untuk menetapkan saiz bahagian "kontena" untuk mengatakan 90%. Dalam contoh ini, bahagian kontena tidak mempunyai elemen lain yang mengelilinginya selain daripada badan, yang tidak kita tetapkan kepada sebarang nilai tertentu. Secara lalai, badan akan menjadikan 100% tetingkap penyemak imbas. Oleh itu, peratusan bahagian "kontena" akan didasarkan pada saiz tetingkap penyemak imbas. Memandangkan tetingkap penyemak imbas berukuran besar, begitu juga saiz "bekas" ini. Oleh itu, jika tetingkap penyemak imbas adalah 2000 piksel, bahagian ini akan dipaparkan pada 1800 piksel. Ini dikira sebagai 90 peratus daripada 2000 (2000 x .90 = 1800)), yang merupakan saiz penyemak imbas.
Jika setiap bahagian "col" yang terdapat di dalam "bekas" ditetapkan pada saiz 30%, maka masing-masing akan menjadi 540 piksel lebar dalam contoh ini. Ini dikira sebagai 30% daripada 1800 piksel yang kontena menghasilkan pada (1800 x .30 = 540). Jika kita menukar peratusan bekas itu, bahagian-bahagian dalam ini juga akan berubah dalam saiz yang mereka buat kerana ia bergantung kepada elemen yang mengandunginya.
Mari kita anggap bahawa tingkap pelayar tetap pada 2000 piksel lebar, tetapi kita menukar nilai peratusan kontena kepada 80% bukannya 90%. Ini bermakna ia akan menghasilkan pada 1600 piksel yang luas sekarang (2000 x .80 = 1600). Walaupun kita tidak mengubah CSS untuk saiz bahagian 3 "col" kita, dan meninggalkannya pada 30%, mereka akan membuat perbezaan sekarang kerana unsur yang mengandungi mereka, yang merupakan konteks yang mereka bersaiz, telah berubah. Sebanyak 3 bahagian ini akan menghasilkan sebanyak 480 piksel lebar, iaitu 30% daripada 1600, atau saiz kontena (1600 x .30 = 480).
Mengambil ini lebih jauh, jika ada imej di dalam salah satu bahagian "col" ini dan imej itu bersaiz dengan menggunakan peratusan, konteks untuk saiznya akan menjadi "col" itu sendiri. Oleh kerana bahagian "kol" berubah dalam saiz, begitu juga imej di dalamnya. Jadi, jika saiz penyemak imbas atau "bekas" berubah, itu akan menjejaskan bahagian tiga "col", yang kemudiannya akan mengubah saiz imej di dalam "col." Seperti yang anda lihat, semua ini disambungkan apabila ia berpengaruh kepada nilai saiz yang dipacu oleh peratusan.
Apabila anda mempertimbangkan bagaimana elemen di dalam halaman web akan diberikan apabila nilai peratusan digunakan untuk lebarnya, anda perlu memahami konteks di mana unsur itu berada di markup halaman.
Dalam Ringkasan
Peratusan memainkan peranan penting dalam membuat susun atur untuk laman web responsif . Sama ada anda menyusun imej secara responsif atau menggunakan lebar peratusan untuk membuat grid yang benar-benar cair yang saiznya relatif kepada satu sama lain, memahami pengiraan ini akan diperlukan untuk mencapai rupa yang anda inginkan.