Diajar kumaha web panyungsi nangtukeun tampilan nganggo nilai perséntase
Loba siswa desain web responsif boga waktu susah maké percentages keur nilai lebar. Husus, aya kabingungan kalayan carana browser nu Etang pamadegan percentages. Handap anjeun nimu katerangan lengkep ngeunaan kumaha percentages dianggo pikeun itungan lebar dina ramatloka responsif.
Ngagunakeun piksel pikeun Nilai Width
Lamun anjeun ngagunakeun piksel salaku nilai lebar, hasil pisan lugas. Lamun make CSS pikeun ngeset nilai rubak unsur dina lulugu tina dokumen ka lega 100 piksel, unsur nu bakal ukuran sarua salaku salah nu disetel ka 100 piksel lega di eusi website urang atanapi footer atawa wewengkon séjén anu kaca. Piksel anu hiji nilai mutlak, jadi 100 piksel anu 100 piksel euweuh urusan mana di dokumen Anjeun unsur nembongan. Hanjakal, bari nilai piksel anu gampang ngartos, aranjeunna teu dianggo oge di situs web responsif.
Ethan Marcotte dikedalkeun istilah "web design responsif", dijelaskeun pendekatan ieu ngandung 3 kepala sekolah konci:
- Hiji grid cairan
- média cairan
- queries Media
dua jelema mimitina titik, grid cairan jeung média cairan, nu kahontal ku maké percentages, tinimbang piksel, pikeun sizing nilai.
Ngagunakeun percentages pikeun Nilai Width
Lamun anjeun make percentages pikeun ngadegkeun lebar pikeun unsur, ukuran sabenerna nu mintonkeun unsur dina baris rupa-rupa gumantung kana dimana eta aya dina dokumen éta. Percentages mangrupakeun hiji nilai relatif, hartina ukuran ditampilkeun nyaeta relatif ka elemen séjén dina dokumen Anjeun.
Contona, upami anjeun nyetel rubak hiji gambar ka 50%, ieu henteu hartosna yén gambar bakal nembongkeun dina satengah tina ukuran normal na. Ieu misconception umum.
Mun hiji gambar anu natively 600 piksel lega, teras maké nilai CSS pikeun nembongkeun eta di 50% henteu hartosna yén nagara éta bakal jadi lega 300 piksel dina web browser. nilai persentase ieu diitung dumasar kana unsur nu ngandung gambar éta, moal ukuran asli tina gambar sorangan. Mun wadah (anu bisa janten division atawa sababaraha unsur séjén HTML) nyaeta 1000 piksel lega, teras gambar bakal nembongkeun dina 500 piksel saprak nilai nu geus 50% ti lebar wadahna urang. Mun unsur nu ngandung téh 400 piksel lega, teras gambar hijina baris nembongkeun di 200 piksel, saprak nilai nu geus 50% wadahna. Gambar sual di dieu miboga ukuran 50% nu gumantung sagemblengna kana unsur nu ngandung eta.
Inget, desain responsif mangrupa cairan. Layouts sarta ukuran bakal robah jadi layar perobahan ukuran / alat . Lamun mikir ngeunaan ieu dina fisik, istilah non-web, éta kawas gaduh kotak karton nu keur ngeusian jeung paking bahan. Lamun disebutkeun yen kotak kudu satengah ngeusi bahan éta, jumlah paking nu peryogi bakal rupa-rupa gumantung kana ukuran tina kotak. Sami nyepeng bener keur lebaran persentase dina rarancang wéb.
Percentages Dumasar percentages lianna
Dina conto gambar / wadahna, abdi dipake nilai piksel pikeun unsur nu ngandung ka némbongkeun kumaha gambar responsif bakal nembongkeun. Dina kanyataanana, unsur nu ngandung bakal ogé jadi pakakas pikeun perséntase sarta gambar, atanapi elemen séjén, di jero éta wadahna bakal meunang nilai maranéhanana dumasar perséntase perséntase.
Di dieu téh conto sejen nu nunjukeun ieu dina kaperluan praktis.
Ucapkeun anjeun gaduh ramatloka dimana sakabéh situs ieu ngandung dina division kalayan kelas "wadahna" (prakték umum desain web). Jero division anu tilu bagean sejen nu baris pamustunganana gaya pikeun nembongkeun sakumaha 3 kolom nangtung. HTML nu bisa kasampak kawas kieu:
Kiwari, anjeun bisa make CSS pikeun ngeset ukuran anu "wadah" division ngomong 90%. Dina conto ieu, bagéan wadahna teu boga unsur séjén nu lingku eta lian ti awak, nu urang can disetél ka sagala nilai husus. Sacara standar, awak bakal ngarobah jadi 100% tina jandela browser. Ku alatan éta, "wadah" persentase division urang bakal dumasar kana ukuran tina jandela browser. Salaku nu jandela browser robah dina ukuranana, jadi bakal ukuran ieu "wadah". Ku kituna lamun jandéla browser is 2000 piksel lega, division ieu bakal nembongkeun dina 1800 piksel. Ieu diitung salaku 90-persén 2000 (2000 x .90 = 1800)), nu ukuran di browser nu.
Mun unggal salah sahiji "col" bagean kapanggih dina "wadah" anu nangtukeun ka ukuran 30%, teras tiap sahijina bakal lega 540 piksel dina conto ieu. Ieu diitung salaku 30% tina 1800 piksel anu wadahna renders di (1800 x .30 = 540). Mun urang dirobah persentase wadahna anu, ieu bagean jero ogé bakal robah dina ukuran aranjeunna ngarobah dina saprak aranjeunna gumantung nu ngandung unsur.
Hayu urang nganggap yen jandéla browser tetep dina 2000 piksel lega, tapi kami ngarobah nilai perséntase wadahna ka 80% tibatan 90%. Nu ngandung harti yén éta bakal ngarobah dina lega 1600 piksel kiwari (2000 x .80 = 1600). Malah lamun urang teu ngarobah CSS pikeun ukuran 3 "col" bagean urang, sarta ninggalkeun éta dina 30%, maranéhna bakal ngarobah béda ayeuna saprak unsur maranéhanana ngandung, nu kontéks anu sipatna ukuran ku, geus robah. Maranéhanana 3 bagean ayeuna baris ngarobah jadi lega unggal 480 piksel, nu 30% 1600, atawa ukuran dina wadahna (1600 x .30 = 480).
Nyandak ieu malah salajengna, upami aya hiji gambar jero salah sahiji bagean "col" na gambar nu ieu ukuran maké perséntase, anu konteks pikeun sizing na bakal "col" téa. Salaku nu "col" division robah dina ukuranana, jadi ngalakukeunana gambar jero eta. Ku kituna lamun ukuran tina browser atawa "wadah" robah, anu bakal mangaruhan kana tilu "col" bagean nu bakal di péngkolan ngarobah ukuran gambar jero "col". Sakumaha anjeun tiasa tingali, ieu sadayana nyambung lamun datang ka persentase-disetir nilai sizing.
Lamun anjeun nganggap sabaraha unsur jero tina kaca web bakal ngarobah lamun nilai persentase dipaké pikeun lebar na, anjeun perlu neuleuman kontéks nu unsur nu resides dina aksara kaca urang.
Ringkesanana
Percentages maénkeun peran kritis dina nyieun tata perenah pikeun jaba responsif . Naha anjeun sizing Gambar responsively atawa maké lebaran persentase sangkan grid sabenerna cairan anu ukuran anu relatif ka silih, pamahaman itungan ieu bakal perlu achieving katingal anjeun mikahayang.