Alamin kung paano matukoy ng mga web browser ang isang display gamit ang mga halaga ng porsyento
Maraming mga mag-aaral ng tumutugon web disenyo ay may isang mahirap na oras gamit ang mga porsyento para sa mga halaga ng lapad. Sa partikular, may pagkalito sa kung paano kinakalkula ng browser ang mga porsyento na iyon. Sa ibaba makakahanap ka ng detalyadong paliwanag kung paano gumagana ang mga porsyento para sa mga kalkulasyon ng lapad sa isang tumutugon na website.
Paggamit ng Mga Pixel para sa Mga Halaga ng Lapad
Kapag gumamit ka ng mga pixel bilang isang lapad na halaga, ang mga resulta ay napaka-tapat. Kung gumamit ka ng CSS upang itakda ang halaga ng lapad ng isang elemento sa header ng isang dokumento sa 100 pixel ang lapad, ang sangkap na iyon ay magkapareho ang laki na itinakda mo sa 100 pixel ang lapad sa nilalaman ng website o footer o iba pang mga lugar ng pahina. Ang mga pixel ay isang lubos na halaga, kaya 100 pixels ay 100 pixels kahit na sa iyong dokumento isang elemento ay lilitaw. Sa kasamaang palad, habang ang mga halaga ng pixel ay madaling maunawaan, hindi ito gumagana nang maayos sa mga tumutugon na mga website.
Inilahad ni Ethan Marcotte ang terminong "tumutugon sa disenyo ng web", na nagpapaliwanag sa diskarte na ito na naglalaman ng 3 pangunahing mga punong-guro:
- Isang likidong grid
- Fluid media
- Mga query ng media
Ang mga unang dalawang punto, isang fluid grid at fluid na media, ay nakamit sa pamamagitan ng paggamit ng mga porsyento, sa halip ng mga pixel, para sa mga halaga ng sizing.
Paggamit ng Mga Porsyento para sa Mga Halaga ng Lapad
Kapag gumagamit ka ng mga porsyento upang magtatag ng isang lapad para sa isang elemento, ang aktwal na laki na ipinapakita ng elemento ay mag-iiba depende sa kung saan ito ay nasa dokumento. Ang mga porsyento ay isang kamag-anak na halaga, ibig sabihin ang sukat na ipinapakita ay may kaugnayan sa ibang mga elemento sa iyong dokumento.
Halimbawa, kung itinakda mo ang lapad ng isang imahe sa 50%, hindi ito nangangahulugan na ang imahe ay ipapakita sa kalahati ng normal na laki nito. Ito ay isang karaniwang maling kuru-kuro.
Kung ang isang imahe ay natively 600 pixels wide, pagkatapos ang paggamit ng isang halaga ng CSS upang ipakita ito sa 50% ay hindi nangangahulugan na ito ay magiging 300 pixel ang lapad sa web browser. Ang halagang porsyento na ito ay kinakalkula batay sa elemento na naglalaman ng larawang iyon, hindi ang katutubong laki ng imahe mismo. Kung ang lalagyan (na maaaring isang dibisyon o ibang elemento ng HTML) ay may malawak na 1000 pixel, pagkatapos ay ipapakita ang imahe sa 500 pixel dahil ang halagang iyon ay 50% ng lapad ng lalagyan. Kung ang naglalaman ng elemento ay may lapad na 400 pixel, pagkatapos ay ipapakita lamang ang imahe sa 200 pixel, dahil ang halagang iyon ay 50% ng lalagyan. Ang imahe na pinag-uusapan dito ay may 50% na laki na ganap na nakasalalay sa sangkap na naglalaman nito.
Tandaan, ang tumutugon na disenyo ay likido. Ang mga layout at sukat ay magbabago habang nagbabago ang sukat ng screen / device . Kung iniisip mo ito sa pisikal, di-web termino, ito ay tulad ng pagkakaroon ng isang karton na kahon na pinupuno mo ng packing material. Kung sasabihin mo na ang kahon ay dapat kalahati na puno ng materyal na iyon, ang halaga ng pag-iimpake na kailangan mo ay mag-iiba depende sa laki ng kahon. Ang parehong hawak totoo para sa mga lapad ng porsyento sa web design.
Mga Porsyento Batay sa Iba Pang Mga Porsyento
Sa halimbawa ng imahe / lalagyan, ginamit ko ang mga halaga ng pixel para sa naglalaman ng elemento upang ipakita kung paano ipapakita ang tumutugon na imahe. Sa katunayan, ang elementong naglalaman din ay itatakda sa isang porsyento at ang imahe, o iba pang mga elemento, sa loob ng lalagyan na iyon ay makakakuha ng kanilang mga halaga batay sa isang porsyento ng isang porsyento.
Narito ang isa pang halimbawa na nagpapakita ito sa pagsasagawa.
Sabihin na mayroon kang isang website kung saan ang buong site ay nilalaman sa loob ng isang dibisyon na may isang klase ng "lalagyan" (isang karaniwang pagsasanay sa disenyo ng web). Sa loob ng dibisyon ay tatlong iba pang mga dibisyon na sa huli ay istilo upang ipakita bilang 3 vertical na mga haligi. Maaaring ganito ang HTML na ganito:
Ngayon, maaari mong gamitin ang CSS upang itakda ang sukat ng dibisyon ng "lalagyan" na sasabihin 90%. Sa halimbawang ito, ang lalagyan ng dibisyon ay walang ibang elemento na pumapaligid dito maliban sa katawan, na hindi namin itinakda sa anumang partikular na halaga. Bilang default, ang katawan ay magbibigay bilang 100% ng window ng browser. Samakatuwid, ang porsyento ng porsiyento ng "lalagyan" ay batay sa laki ng window ng browser. Tulad ng pagbabago sa window ng browser na laki, gayon din ang sukat ng "lalagyan" na ito. Kaya kung ang window ng browser ay malawak na 2000 pixel, ang division na ito ay ipapakita sa 1800 pixels. Ito ay kinakalkula bilang 90-porsiyento ng 2000 (2000 x .90 = 1800)), na kung saan ay ang laki ng browser.
Kung ang bawat isa sa mga dibisyon ng "col" na matatagpuan sa loob ng "lalagyan" ay nakatakda sa isang sukat ng 30%, kung gayon ang bawat isa sa kanila ay 540 pixel ang lapad sa halimbawang ito. Ito ay kinakalkula bilang 30% ng 1800 pixels na ang lalagyan ay nagpapakita sa (1800 x .30 = 540). Kung binago namin ang porsyento ng lalagyan na iyon, ang mga panloob na dibisyon ay magbabago rin sa sukat na kanilang ibinibigay dahil sila ay nakasalalay sa na naglalaman ng elemento.
Ipagpalagay natin na ang mga window ng browser ay nananatiling nasa 2000 pixel wide, ngunit binabago namin ang halaga ng porsyento ng lalagyan sa 80% sa halip ng 90%. Nangangahulugan ito na magre-render ito sa 1600 na pixel na lapad ngayon (2000 x .80 = 1600). Kahit na hindi namin binago ang CSS para sa laki ng aming 3 "col" divisions, at iwanan ang mga ito sa 30%, magbibigay sila ng naiiba ngayon dahil ang kanilang naglalaman ng elemento, na kung saan ay ang konteksto na sila ay laki ng, ay nagbago. Ang 3 na dibisyon ay mag-render ngayon bilang 480 na pixel ang lapad, na 30% ng 1600, o ang laki ng lalagyan (1600 x .30 = 480).
Ang pagkuha nito kahit na higit pa, kung mayroong isang imahe sa loob ng isa sa mga "col" dibisyon at ang imahe ay laki sa pamamagitan ng isang porsyento, ang konteksto para sa pagpapalaki nito ay ang "col" mismo. Bilang na ang "col" division nabago sa laki, kaya ang imahe sa loob nito. Kaya't kung ang laki ng browser o ang "lalagyan" ay nagbago, makakaapekto ito sa tatlong dibisyon ng "col", na magbabago sa laki ng imahe sa loob ng "col." Tulad ng makikita mo, ang mga ito ay konektado kapag ito ay lumalabas sa mga halaga ng paghina ng porsyento.
Kapag isinasaalang-alang mo kung paano ang isang elemento sa loob ng isang web page ay magre-render kapag ang isang porsyento na halaga ay ginagamit para sa lapad nito, kailangan mong maunawaan ang konteksto kung saan ang elementong iyon ay namamalagi sa markup ng pahina.
Sa buod
Ang mga porsyento ay naglalaro ng isang kritikal na papel sa paglikha ng layout para sa mga tumutugon na mga website . Kung ikaw ay sizing mga imahe responsively o paggamit ng lapad ng porsyento upang makagawa ng isang tunay na fluid grid na ang laki ay may kaugnayan sa bawat isa, pag-unawa ng mga kalkulasyon na ito ay kinakailangan upang makuha ang hitsura ninanais mo.