Katrangan carane browser web nemtokake tampilan nggunakake persentasi nilai
Akeh siswa saka desain web responsif duwe wektu angel nggunakake persentase kanggo nilai-nilai jembar. Khusus, ana kebingungan karo cara browser ngétung persentase kasebut. Ing ngisor iki sampeyan bakal nemokake penjelasan rinci babagan cara persentase bisa digunakake kanggo kalkulasi jembar ing situs web sing responsif.
Nggunakake Piksel kanggo Nilai Lebar
Nalika sampeyan nggunakake piksel minangka nilai jembar, asile gampang banget. Yen sampeyan nggunakake CSS kanggo ngeset nilai jembar saka unsur ing header dokumen nganti 100 piksel, unsur kasebut bakal ukurane padha karo sing sampeyan nyetel nganti 100 piksel ing situs utawa jejere situs web utawa wilayah liyane kaca. Piksel iku nilai Absolute, supaya 100 piksel 100 piksel ora ana ing ngendi ing dokumen sampeyan katon. Sayange, dene nilai piksel gampang dingerteni, ora bisa dianggo kanthi apik ing situs web sing responsif.
Ethan Marcotte diciptakaké istilah "desain web responsif", njelasaké pendekatan iki minangka ngandhut 3 prinsip utama:
- Kothak cairan
- Media cairan
- Pitakon media
Sing loro nilai pisanan, kothak cairan lan media cairan, bisa ditemokake kanthi nggunakake persentase, tinimbang piksel, kanggo ukuran sizing.
Nggunakake Persentase kanggo Nilai Lebar
Nalika sampeyan nggunakake persentase kanggo netepake jembar kanggo sawijining unsur, ukuran sing nyata sing bakal ditampilake unsur bakal beda-beda gumantung ing endi sing ana ing dokumen kasebut. Persentasi iku nilai relatif, tegese ukuran sing ditampilake relatif marang unsur liyane ing dokumen sampeyan.
Misale, yen sampeyan ngeset lebar gambar nganti 50%, iki ora ateges gambar sing bakal ditampilake ing setengah ukuran normal. Iki minangka misconception umum.
Yen gambar sing asli 600 piksel, banjur nggunakake nilai CSS kanggo nampilake ing 50% ora ateges bakal dadi 300 piksel jembar ing browser web. Nilai persentase diitung miturut unsur sing ngemot gambar kasebut, dudu ukuran asli gambar kasebut. Yen wadhah (sing bisa divisi utawa sawetara unsur HTML liyane) yaiku 1000 piksel, banjur gambar kasebut bakal katon ing 500 piksel amarga nilai kasebut 50% saka jembar wadhah. Yen unsur sing ana wis 400 piksel, banjur gambar mung ditampilake ing 200 piksel, amarga nilai kasebut 50% saka wadhah. Gambar sing ditemokake ing kene nduweni ukuran 50% sing gumantung ing unsur sing ngemot.
Elingi, desain responsif iku adi. Tata letak lan ukuran bakal ngganti minangka owahan ukuran layar / piranti . Yen sampeyan mikir babagan istilah fisik, non-web, kaya kothak kardus sing ngisi karo bahan pengepakan. Yen sampeyan ngomong yen kothak kudu setengah diisi karo materi, jumlah pengepakan sing sampeyan butuhake beda-beda gumantung saka ukuran kothak. Padha kaya bener kanggo persentasi jembar ing desain web.
Persentase Adhedhasar Persen liyane
Ing gambar / contone umpamane, aku nggunakake nilai piksel kanggo elemen sing ana kanggo nuduhake carane gambar sing responsif bakal ditampilake. Ing kasunyatan, unsur sing ana uga bakal disetel menyang persentase lan gambar, utawa unsur liyane, ing jero wadah kasebut bakal nemokake nilai-nilai sing didhasarake persentase persentase.
Contone, conto liyane sing nuduhake iki ing laku.
Ngomong duwe situs web ing ngendi kabeh situs kasebut ana ing sawijining divisi karo kelas "wadah" (laku desain web umum). Ing bagean kasebut ana tiga bagean liyane sing bakal pungkasanipun gaya kanggo nampilake minangka 3 kolom vertikal. HTML sing bisa katon kaya iki:
Saiki, sampeyan nggunakake CSS kanggo nyetel ukuran sing "wadhah" divisi kanggo 90%. Ing conto iki, bagean divisi ora nduweni elemen liyane sing ngubengi liyane saka awak, sing durung ditetepake kanggo kabeh nilai tartamtu. Secara default, awak bakal nerjemahake minangka 100% saka jendhela browser. Mulane persentasi divisi "wadhah" bakal adhedhasar ukuran jendhela browser. Nalika jendhela browser owah-owahan ing ukuran, dadi bakal ukuran "wadah" iki. Dadi yen jembar browser wis 2000 piksel, divisi iki bakal ditampilake ing 1800 piksel. Iki diitung 90 persen saka 2000 (2000 x .90 = 1800)), yaiku ukuran browser.
Yen saben bagean "col" divisi sing ana ing "wadah" disetel dadi ukuran 30%, banjur saben bakal 540 piksel ing conto iki. Iki diitung minangka 30% saka 1800 piksel sing diwenehi wadah ing (1800 x .30 = 540). Yen kita ngowahi persentase saka wadhah kasebut, bagean-bagean batin iki uga bakal ngganti ukuran sing diwenehake nalika padha gumantung marang unsur sing ana.
Ayo, ngira yen jendhela browser tetep ing 2000 piksel, nanging kita ganti nilai persentase saka kontainer dadi 80% tinimbang 90%. Tegese bakal menehi 1600 piksel wiyar saiki (2000 x .80 = 1600). Sanajan kita ora ngganti CSS kanggo ukuran divisi 3 "col", lan ninggalake wong-wong mau ing 30%, bakal menehi beda saiki amarga unsur sing ana, yaiku konteks sing lagi ukuran, wis berubah. Saben 3 bagean iki bakal menehi saben sudhut 480 piksel, yaiku 30% saka 1600, utawa ukuran wadhah (1600 x .30 = 480).
Mangkono uga, yen ana gambar ing salah sawijining divisi "col" lan gambar kasebut ukuran kanthi persentase, konteks kanggo ukuran bakal dadi "col" dhewe. Dadi divisi "col" diowahi kanthi ukuran, dadi gambar ing njero. Dadi yen ukuran browser utawa "wadah" diowahi, sing bakal mengaruhi tataran tiga "col", sing bakal ngganti ukuran gambar ing jero "col". Kaya sampeyan bisa ndeleng, iki kabeh disambungake nalika nerangake nilai sizing-persentasi.
Nalika sampeyan nimbang cara sawijining unsur ing kaca web bakal nerjemahake nalika nilai persentase digunakake kanggo jembaré, sampeyan kudu ngerti konteks ing elemen kasebut ing markup kaca.
Ing ringkesan
Persentase muter peran kritis kanggo nggawe tata letak situs web sing responsif . Apa sampeyan ukuran gambar responsif utawa nggunakake persentasi lebar kanggo nggawe kothak saestu cairan kang ukuran relatif kanggo saben liyane, mangertos iki kalkulasi bakal perlu kanggo nampa tampilan sing dikarepake.