Hibal-i kon giunsa pagtino sa mga web browser ang usa ka display gamit ang mga porsiyento nga mga bili
Daghang mga estudyante sa responsive web design adunay lisud nga panahon sa paggamit sa mga porsyento alang sa mga bili sa gilapdon. Sa piho, adunay kalibog kung giunsa nga gikalkulo sa browser ang mga porsyento. Sa ubos makit-an nimo ang usa ka detalyadong eksplinasyon kung giunsa nga ang mga porsyento nagtrabaho sa kalkulasyon sa gilapdon sa usa ka responsive nga website.
Paggamit sa mga Pixels alang sa mga Bili sa Lugway
Kon mogamit ka og mga pixel isip usa ka bili sa gilapdon, ang mga resulta matinud-anon kaayo. Kung gigamit nimo ang CSS aron ibutang ang width value sa usa ka elemento sa header sa usa ka dokumento ngadto sa 100 ka pixel ang gilapdon, kanang elemento parehas ang gidak-on nga imong gibutang sa 100 ka pixel ang gilapdon sa sulod sa website o footer o ubang mga bahin sa panid. Ang mga pixel usa ka hingpit nga bili, busa 100 ka pixel ang 100 ka pixel bisan asa sa imong dokumento ang usa ka elemento nga makita. Ikasubo, samtang ang mga mithi sa pixel dali rang masabtan, wala kini maayo nga pagtrabaho sa mga website nga responsive.
Si Ethan Marcotte nagmugna sa termino nga "responsive web design", nga nagpatin-aw niini nga paagi nga adunay 3 ka mga prinsipal:
- Usa ka fluid grid
- Fluid media
- Mga pangutana sa media
Kadtong unang duha ka punto, usa ka fluid grid ug fluid media, makab-ot pinaagi sa paggamit sa mga porsyento, inay sa mga pixel, alang sa pag-sizing values.
Paggamit sa mga Porsyento alang sa mga Bili sa Kaluoy
Kon mogamit ka og mga porsyento aron ma-establisar ang usa ka gilapdon alang sa usa ka elemento, ang aktwal nga gidak-on nga gipakita sa elemento magkalahi depende kung diin kini anaa sa dokumento. Ang porsiyento mao ang usa ka paryente nga bili, nagpasabot nga ang gidak-on nga gipakita may kalabutan sa ubang mga elemento sa imong dokumento.
Pananglitan, kon imong gibutang ang gilapdon sa usa ka imahe ngadto sa 50%, kini wala magpasabut nga ang hulagway ipakita sa katunga sa normal nga gidak-on niini. Kini usa ka kasagarang sayup nga pagsabut.
Kung ang usa ka imahen usa ka 600 pixel ang gilapdon, dayon gamit ang usa ka CSS value aron ipakita kini sa 50% dili nagpasabot nga kini mahimong 300 ka pixel ang gilapdon diha sa web browser. Kining porsiyento nga bili gibanabana nga gibase sa elemento nga naglangkob sa maong larawan, dili ang lumad nga gidak-on sa imahe mismo. Kon ang sudlanan (nga mahimo nga usa ka dibisyon o uban nga elemento sa HTML) mao ang 1000 ka pixel ang gilapdon, nan ang imahe ipakita sa 500 ka pixel tungod kay ang kantidad mao ang 50% sa lapad nga sudlanan. Kon ang sulod nga elemento adunay gilapdon nga 400 ka pixel, nan ang imahe igapakita lamang sa 200 ka pixel, tungod kay kana nga kantidad mao ang 50% sa sudlanan. Ang hulagway sa pangutana dinhi adunay 50% nga gidak-on nga nag-agad sa hingpit sa elemento nga naglangkob niini.
Hinumdomi, ang tubag nga tubag nga likido. Ang mga Layout ug mga gidak-on mausab samtang ang gidak-on sa gidak-on sa screen / device . Kung hunahunaon mo kini sa pisikal, dili web nga termino, kini susama sa pagbutang sa usa ka karton nga kahon nga puno ka sa pagputos nga materyal. Kon moingon ka nga ang kahon kinahanglan nga katunga nga napuno sa maong materyal, ang gidaghanon sa pagpamutos nga imong gikinahanglan magkalain depende sa gidak-on sa kahon. Ang sama nga naghupot nga tinuod alang sa porsyento nga lapad sa web design.
Porsyento nga Gibase sa Ubang Porsiyento
Sa pananglitan / pananglitan sa sudlanan, gigamit nako ang mga bili sa pixel alang sa naglangkob nga elemento aron ipakita kon unsaon ipakita ang responsive nga imahe. Sa pagkatinuod, ang elemento nga adunay elemento gibutang usab sa usa ka porsyento ug ang larawan, o ubang mga elemento, sa sulod nga sudlanan nga makakuha sa ilang mga bili gibase sa porsiyento sa usa ka porsyento.
Ania ang laing pananglitan nga nagapakita niini sa praktis.
Ingnon ka nga adunay usa ka website diin ang tibuok nga site anaa sulod sa usa ka dibisyon nga adunay usa ka klase sa "container" (usa ka komon nga disenyo sa web nga praktis). Sulod niana nga dibisyon mao ang tulo ka laing mga dibisyon nga sa kadugayan imong ipasundayag nga gipakita ingon nga 3 bertikal nga mga kolum. Kana nga HTML mahimong ingon niini:
Karon, mahimo nimong gamiton ang CSS aron i-set ang gidak-on sa "container" division nga moingon nga 90%. Sa niini nga pananglitan, ang container division walay laing elemento nga naglibut niini gawas sa lawas, nga wala nato ibutang sa bisan unsa nga piho nga bili. Sa kasagaran, ang lawas maghimo ingon nga 100% sa window sa browser. Busa, ang porsyento sa "sudlanan" nga bahin gibase sa gidak-on sa browser window. Ingon nga ang window sa browser nag-usab sa gidak-on, mao usab ang gidak-on sa kini nga "sudlanan". Busa kon ang bintana sa browser maoy 2000 pixel ang gilapdon, kini nga dibisyon makita sa 1800 ka pixel. Kini gibanabana nga 90-porsyento sa 2000 (2000 x .90 = 1800)), nga mao ang gidak-on sa browser.
Kon ang matag usa sa "mga" dibisyon nga anaa sa sulod sa "sudlanan" gibutang sa gidak-on nga 30%, unya ang matag usa niini mahimong 540 ka pixel ang gilapdon niini nga pananglitan. Kini gibanabana nga 30% sa 1800 ka pixel nga gibutang sa container sa (1800 x .30 = 540). Kon atong usbon ang porsiyento sa maong sudlanan, kini nga mga bahin sa sulod usab mag-usab sa gidak-on nga ilang gihatag tungod kay kini nagsalig sa nga naglangkob sa elemento.
Hunahunaa nga ang mga window sa browser nagpabilin sa 2000 pixel ang gilapdon, apan among giusab ang porsyento nga bili sa sudlanan ngadto sa 80% imbis 90%. Kana nagpasabot nga kini magahatag sa 1600 ka pixel ang gilapdon karon (2000 x .80 = 1600). Bisan kon dili nato usbon ang CSS sa gidak-on sa atong 3 "mga" dibisyon, ug ibilin kini sa 30%, kini makahatag og lahi karon tungod kay ang naundan nga elemento, nga mao ang konteksto nga kini gisab-an, nausab. Kadtong 3 ka dibisyon karon makahatag og 480 ka pixel ang gilapdon, nga 30% sa 1600, o ang gidak-on sa sudlanan (1600 x .30 = 480).
Ang pagdugang niini labi pa, kon adunay usa ka imahen sa usa sa mga dibisyon sa "kol" ug ang maong imahe gigamit sa usa ka porsyento, ang konteksto alang sa pagsukod niini mao ang "kol" mismo. Ingon nga ang "kol" nga pagkabahin mausab sa gidak-on, mao usab ang hulagway sa sulod niini. Busa kon ang gidak-on sa browser o ang "sudlanan" nausab, kana makaapekto sa tulo ka mga "pagkabahinbahin", nga sa baylo mag-usab sa gidak-on sa hulagway sulod sa "col." Sama sa imong makita, kini tanan konektado kini moabut sa porsiyento nga giduso nga mga sukdanan sa sizing.
Kon imong hunahunaon kung unsa ang usa ka elemento sa sulod sa usa ka web page nga magahatag kon ang usa ka porsyento nga bili gigamit alang sa gilapdon niini, kinahanglan nimo nga masabtan ang konteksto diin kana nga elemento anaa sa markup sa panid.
Sa Sumada
Ang porsyento adunay mahinungdanong papel sa pagmugna sa layout alang sa mga responsive nga mga website . Nag-istoryahanay ka man o naggamit sa mga lapad nga porsiyento sa paghimo sa usa ka tinuod nga fluid grid nga ang gidak-on may kalabutan sa usag usa, ang pagsabut niini nga mga kalkulasyon kinahanglanon aron pagkab-ot sa hitsura nga imong gitinguha.