Aprann kijan navigatè entènèt detèmine yon ekspozisyon lè l sèvi avèk valè pousantaj
Anpil elèv nan konsepsyon entènèt reponn gen yon tan difisil lè l sèvi avèk pousantaj pou valè lajè. Espesyalman, gen konfizyon ak ki jan navigatè a kalkile pousantaj sa yo. Anba a ou pral jwenn yon eksplikasyon detaye sou kijan pousantaj travay pou kalkil lajè nan yon sit entènèt ki reponn.
Sèvi ak piksèl pou Valè Lajè
Lè ou itilize piksèl kòm yon valè lajè, rezilta yo trè dwat. Si ou itilize CSS yo mete valè lajè nan yon eleman nan header a nan yon dokiman a 100 piksèl lajè, ke eleman yo pral menm gwosè a kòm youn ke ou mete nan 100 piksèl lajè nan kontni sit entènèt la oswa pye oswa lòt zòn nan paj. Piksèl yo se yon valè absoli, se konsa 100 piksèl se 100 piksèl pa gen pwoblèm kote nan dokiman ou yon eleman parèt. Malerezman, pandan y ap valè pixel yo fasil pou konprann yo, yo pa travay byen nan sit entènèt reponn.
Ethan Marcotte envante tèm "konsepsyon wèb la", eksplike apwòch sa a kòm ki gen 3 direktè kle:
- Yon griy likid
- Medya likid
- Demand medya
Moun sa yo ki premye de pwen, yon griyid likid ak medya likid, yo reyalize lè l sèvi avèk pousantaj, olye pou yo piksèl, pou valè kolaj.
Sèvi ak Pousantaj pou Valè Lajè
Lè ou itilize pousantaj pou etabli yon lajè pou yon eleman, gwosè aktyèl la ki montre eleman nan pral varye selon kote li nan dokiman an. Pousantaj yo se yon valè relatif, sa vle di gwosè a parèt relatif nan lòt eleman nan dokiman ou.
Pou egzanp, si ou mete lajè a nan yon imaj a 50%, sa pa vle di ke imaj la ap montre nan mwatye nan gwosè nòmal li yo. Sa a se yon miskonsepsyon komen.
Si yon imaj se nati 600 piksèl lajè, Lè sa a, lè l sèvi avèk yon valè CSS yo montre li nan 50% pa vle di ke li pral 300 piksèl lajè nan navigatè wèb la. Sa a valè pousantaj yo kalkile ki baze sou eleman ki gen imaj sa a, pa gwosè a natif natal nan imaj la tèt li. Si veso a (ki ta ka yon divizyon oswa kèk lòt eleman HTML) se 1000 piksèl lajè, lè sa a imaj la ap montre nan 500 piksèl depi valè sa a se 50% nan lajè veso a. Si eleman ki genyen a se 400 piksèl lajè, Lè sa a, imaj la pral sèlman montre nan 200 piksèl, depi valè sa a se 50% nan veso a. Imaj la nan kesyon isit la gen yon gwosè 50% ki depann de konplètman sou eleman ki gen ladan li.
Sonje byen, konsepsyon reponn se likid. Kouch ak gwosè ap chanje kòm chanjman nan ekran gwosè / aparèy . Si ou panse sou sa a nan tèm fizik, ki pa entènèt, li se tankou gen yon bwat katon ke ou ap ranpli ak materyèl procesna. Si ou di ke bwat la ta dwe mwatye plen ak materyèl sa a, kantite lajan an nan procesna ou bezwen ap varye depann sou gwosè a nan bwat la. Menm bagay la tou kenbe vre pou pousantaj lajè nan konsepsyon sit entènèt.
Pousantaj ki baze sou Pousantaj Lòt
Nan egzanp la / imaj veso, mwen itilize valè pixel pou eleman ki genyen pou montre kijan imaj repons lan ta montre. An reyalite, eleman ki genyen an ta dwe mete tou nan yon pousantaj ak imaj la, oswa lòt eleman, andedan veso sa a ta jwenn valè yo ki baze sou yon pousantaj yon pousantaj.
Isit la nan yon lòt egzanp ki montre sa a nan pratik.
Di ou gen yon sit entènèt kote tout sit la genyen nan yon divizyon ak yon klas nan "veso" (yon pratik entènèt komen pratik). Anndan ke divizyon se twa divizyon lòt ke ou pral evantyèlman style yo montre kòm 3 kolòn vètikal. HTML sa ka gade konsa:
Koulye a, ou ka itilize CSS yo mete gwosè a nan "veso" divizyon di 90%. Nan egzanp sa a, divizyon an veso pa gen yon lòt eleman ki antoure li lòt pase kò a, ki nou pa te mete nan nenpòt valè espesifik. Pa default, kò a pral rann kòm 100% nan fenèt navigatè a. Se poutèt sa, pousantaj "veso" divizyon an ap baze sou gwosè a nan fenèt navigatè a. Kòm ke fenèt navigatè chanje nan gwosè, se konsa yo pral gwosè a nan sa a "veso". Se konsa, si fenèt navigatè a se 2000 piksèl lajè, divizyon sa a ap montre nan 1800 piksèl. Sa a se kalkile kòm 90-pousan nan 2000 (2000 x .90 = 1800)), ki se gwosè a nan navigatè a.
Si chak nan divizyon "kol" yo te jwenn nan "veso" la yo mete yon gwosè 30%, chak nan yo pral 540 piksèl lajè nan egzanp sa a. Sa a kalkile kòm 30% nan 1800 piksèl ki veso a rann nan (1800 x .30 = 540). Si nou chanje pousantaj veso sa a, divizyon enteryè sa yo ta chanje tou nan gwosè yo rann nan depi yo depann de ki gen eleman.
Se pou nou asime ke fenèt navigatè yo rete nan 2000 piksèl lajè, men nou chanje valè pousantaj veso a pou 80% olye pou yo 90%. Sa vle di ke li pral rann nan 1600 piksèl lajè kounye a (2000 x .80 = 1600). Menm si nou pa chanje CSS la pou gwosè divizyon 3 "kol" nou an, epi kite yo nan 30%, yo pral rann yon fason diferan depi kounye a eleman ki genyen yo, ki se kontèks yo ke yo menm gwosè a, te chanje. Moun sa yo ki divizyon 3 pral kounye a rann kòm 480 piksèl lajè chak, ki se 30% nan 1600, oswa gwosè a nan veso a (1600 x .30 = 480).
Lè w ap pran sa a menm pi lwen, si te gen yon imaj andedan youn nan divizyon sa yo "kol" e ke imaj te gwosè lè l sèvi avèk yon pousantaj, kontèks la pou dimensionnement li yo ta "kol la" tèt li. Kòm ke "kol" divizyon chanje nan gwosè, se konsa ta imaj la andedan li. Se konsa, si gwosè a nan navigatè a oswa "veso a" chanje, ki ta ka afekte twa "kol" divizyon yo, ki ta nan vire chanje gwosè a nan imaj la andedan "kol la." Kòm ou ka wè, sa yo, yo tout konekte lè li rive pousantaj valè pousantaj pousantaj.
Lè ou konsidere kijan yon eleman ki andedan yon paj entènèt ap rann lè yon valè pousantaj yo itilize pou lajè li, ou bezwen konprann kontèks la nan ki eleman sa a abite nan marke paj la.
An rezime
Pousantaj jwe yon wòl enpòtan nan kreye Layout la pou sit entènèt reponn . Si ou ap kolaj imaj yo reponn oswa lè wap itilize pousantaj lajè pou fè yon griyid vrèman likid ki gen matyè yo relatif youn ak lòt, konprann kalkil sa yo pral nesesè pou reyalize gade ou vle a.