Tgħallem kif web browsers jiddeterminaw wiri bl-użu ta 'valuri perċentwali
Ħafna studenti ta 'disinn tal-web li jirrispondu għandhom żmien diffiċli billi jużaw perċentwali għal valuri ta' wisa '. Speċifikament, hemm konfużjoni ma 'kif il-browser jikkalkula dawk il-perċentwali. Hawn taħt għandek issib spjegazzjoni dettaljata dwar kif il-persentaġġi jaħdmu għall-kalkoli tal-wisa 'f'websajt risponsiva.
Użu ta 'Pixels għal Valuri ta' Wisa '
Meta tuża pixels bħala valur wiesa ', ir-riżultati huma sempliċi ħafna. Jekk tuża CSS biex tistabbilixxi l-valur ta 'wisa' ta 'element fl-intestatura ta' dokument għal 100 pixels wiesa ', dak l-element se jkun l-istess daqs wieħed li inti ssettja għal 100 pixels wiesa' fil-kontenut tal-websajt jew fil-footer jew f'oqsma oħra tal- paġna. Il-pixels huma valur assolut, għalhekk 100 pixels huwa ta '100 pixel irrispettivament minn fejn fid-dokument tiegħek jidher element. Sfortunatament, filwaqt li l-valuri tal-pixel huma faċli biex jinftiehmu, ma jaħdmux sew f'siti ta 'l-internet li jirrispondu.
Ethan Marcotte ħarġet it-terminu "disinn tal-web li jirrispondi", u spjega dan l-approċċ bħala li fih 3 prinċipji ewlenin:
- Gradilja tal-fluwidu
- Mezzi ta 'fluwidu
- Avviżi tal-midja
Dawk l-ewwel żewġ punti, grilja tal-fluwidu u mezzi ta 'fluwidu jinkisbu bl-użu ta' perċentwali, minflok pixels, għad-daqs tal-valuri.
Użu ta 'Perċentwali għal Valuri ta' Wisa '
Meta tuża persentaġġi biex tistabbilixxi wisa 'għal element, id-daqs attwali li dak l-element juri fuq se jvarja skond fejn ikun fid-dokument. Il-perċentwali huma valur relattiv, jiġifieri d-daqs li jidher huwa relattiv għall-elementi l-oħra fid-dokument tiegħek.
Per eżempju, jekk issettja l-wisa 'ta ' immaġni għal 50%, dan ma jfissirx li l-immaġini se juri f'nofs id-daqs normali tiegħu. Dan huwa kunċett żbaljat komuni.
Jekk immaġini hija natively 600 pixels wiesgħa, allura l-użu ta 'valur CSS li juriha f'50% ma jfissirx li se tkun ta' 300 pixels wiesa 'fil-web browser. Dan il-valur tal-persentaġġ huwa kkalkulat abbażi tal-element li fih dik l-immaġni, mhux id-daqs indiġenu tal-immaġni nnifisha. Jekk il-kontenitur (li jista 'jkun diviżjoni jew xi element HTML ieħor) huwa ta' 1000 pixels wiesa ', allura l-immaġni se tintwera b'500 pixel peress li dak il-valur huwa 50% tal-wisa' tal-kontenitur. Jekk l-element li fih ikun ta '400 pixels wiesa', allura l-immaġni se tintwera biss f'200 pixel, peress li dak il-valur huwa 50% tal-kontenitur. L-immaġni in kwistjoni hawnhekk għandha daqs ta '50% li jiddependi kompletament fuq l-element li fih dan.
Ftakar, id-disinn li jirrispondi huwa fluwidu. Id-disinji u d-daqsijiet jinbidlu hekk kif id-daqs tal-iskrin jinbidel . Jekk taħseb dwar dan f'termini fiżiċi, mhux fuq il-web, huwa simili li jkollok kaxxa tal-kartun li timla materjal tal-ippakkjar. Jekk tgħid li l-kaxxa għandha tkun nofs mimlija b'dak il-materjal, l-ammont ta 'ppakkjar li għandek bżonn jvarja skond id-daqs tal-kaxxa. L-istess jgħodd għall-wisa 'ta' persentaġġ fid-disinn tal-web.
Perċentwali Ibbażat fuq Perċentwali Oħra
Fl-eżempju tal-immaġini / kontenitur, użajt valuri tal-pixel għall-element li fih biex turi kif se turi l-immaġni responsiva. Fir-realtà, l-element li jkun fih ikun ukoll stabbilit għal persentaġġ u l-immaġni, jew elementi oħra, ġewwa dak il-kontenitur jiksbu l-valuri tagħhom ibbażati fuq persentaġġ ta 'persentaġġ.
Hawn eżempju ieħor li juri dan fil-prattika.
Tgħid li għandek websajt fejn is-sit kollu jinsab f'diviżjoni bi klassi ta '"kontejner" (prattika komuni tad-disinn tal-web). Ġewwa dik id-diviżjoni hemm tliet diviżjonijiet oħra li eventwalment ser ikollok stil li nuru bħala 3 kolonni vertikali. Dan l-HTML jista 'jidher bħal dan:
Issa, tista 'tuża CSS biex tiffissa d-daqs ta' dik id-diviżjoni ta '"kontenitur" biex tgħid 90%. F'dan l-eżempju, id-diviżjoni tal-kontejner m'għandhiex element ieħor li jdawwarh għajr il-ġisem, li ma stabbilixxejna għal xi valur speċifiku. B'kontumaċja, il-korp jirrendi bħala 100% tat-tieqa tal-browser. Għalhekk, il-persentaġġ tad-diviżjoni tal-'kontenitur 'ikun ibbażat fuq id-daqs tat-tieqa tal-browser. Peress li t-tieqa tal-browser tinbidel fid-daqs, għalhekk id-daqs ta 'dan il- "kontenitur" sejjer. Mela jekk it-tieqa tal-browser hija ta '2000 pixels wiesgħa, din id-diviżjoni se tkun ta' 1800 pixel. Dan huwa kkalkulat bħala 90 fil-mija tas-sena 2000 (2000 x .90 = 1800)), li huwa d-daqs tal-browser.
Jekk kull waħda mid-diviżjonijiet "col" misjuba fil-"kontenitur" huma ssettjati għal daqs ta '30%, allura kull wieħed minnhom se jkun ta' 540 pixels wiesgħa f'dan l-eżempju. Dan huwa kkalkulat bħala 30% tal-1800 pixel li l-kontenitur jagħmel fi (1800 x .30 = 540). Jekk bidilna l-persentaġġ ta 'dak il-kontenitur, dawn id-diviżjonijiet ta' ġewwa jinbidlu wkoll fid-daqs li jagħtu minħabba li huma dipendenti fuq dak fihom l-element.
Ejja nassumu li t-twieqi tal-brawżer jibqgħu 2000 pixels wiesa ', iżda nbiddlu l-valur perċentwali tal-kontenitur għal 80% minflok 90%. Dan ifisser li se tirrendi 1600 pixels wiesgħa issa (2000 x .80 = 1600). Anke jekk aħna ma nbidlux is-CSS għad-daqs tad-diviżjonijiet tagħna ta '3 "col", u ħallihom fi 30%, dawn se jirrendu b'mod differenti issa peress li l-element li fih, li huwa l-kuntest li huma daqshom, inbidel. Dawk id-diviżjonijiet issa se jirrendu 480 pixels wiesgħa kull waħda, li hija 30% ta '1600, jew id-daqs tal-kontenitur (1600 x 30. 480 = 480).
Minkejja dan, jekk kien hemm immaġini f'waħda minn dawn id-diviżjonijiet "col" u dik l-immaġni kienet imdaqqsa b'perċentwal, il-kuntest għad-daqs tiegħu jkun il-kolon innifsu. Peress li dik id-diviżjoni "col" inbidlet fid-daqs, hekk tkun l-immaġni ġewwa fih. Mela jekk id-daqs tal-browser jew il- "kontenitur" inbidel, dan jaffettwa t-tliet diviżjonijiet "col", li min-naħa tagħhom ibiddlu d-daqs ta 'l-immaġini ġewwa l- "kol." Kif tistgħu taraw, dawn huma kollha konnessi meta niġu għall-valuri ta 'daqs imxekkla minn perċentwali.
Meta tikkunsidra kif element ġewwa l-paġna web se tirrendi meta jintuża valur perċentwali għall-wisa 'tiegħu, trid tifhem il-kuntest li fih dak l-element joqgħod fuq il-markup tal-paġna.
Fil-qosor
Il-perċentwali għandhom rwol kritiku fil-ħolqien tat-tqassim għal websajts li jirrispondu . Kemm jekk iddawwal immaġini b'mod responsabbli jew billi tuża wisa 'ta' perċentwal biex tagħmel grilja verament ta 'fluwidu li d-daqsijiet tagħha huma relattivi għal xulxin, fehim li dawn il-kalkoli se jkunu meħtieġa biex tintlaħaq il-ħarsa li tixtieq.