Foghlaim conas a chinneann brabhsálaithe gréasáin taispeáint ag baint úsáide as luachanna céatadáin
Tá an-deacair ag go leor mac léinn de dhearadh gréasáin sofhreagrach ag baint úsáide as céatadáin le haghaidh luachanna leithead. Go sonrach, tá mearbhall ann maidir le conas a ríomhtar an brabhsálaí na céatadáin sin. Anseo thíos gheobhaidh tú míniú mionsonraithe ar an gcaoi a n-oibríonn céatadáin le haghaidh ríomhanna leithead i suíomh gréasáin sofhreagrach.
Ag baint úsáide as Pixels do Luachanna Leithead
Nuair a úsáideann tú picteilín mar luach leithead, tá na torthaí an-simplí. Má úsáideann tú CSS chun luach leithead eilimint a leagan síos i gceannteideal doiciméad go 100 picteilín ar leithead, beidh an eilimint sin an méid céanna agus ceann amháin a leagann tú go 100 picteilín ar leithead in ábhar an láithreáin ghréasáin nó ar an bpríosún nó ar réimsí eile den láithreán gréasáin leathanach. Is luach iomlán é picteilíní, agus mar sin tá 100 pixel ar 100 picteilín, is cuma cén ghné atá i do dhoiciméad. Ar an drochuair, cé go bhfuil luachanna picteilín éasca le tuiscint, ní oibríonn siad go maith i suíomhanna gréasáin freagracha.
Chonacthas Ethan Marcotte an téarma "dearadh gréasáin sofhreagrach", ag míniú an chur chuige seo mar a bhfuil 3 phríomhoide ann:
- Greille sreabhach
- Meáin sreabhach
- Ceisteanna meáin
Baintear amach na chéad dhá phointe sin, greille sreabhach agus meáin sreabhach trí úsáid a bhaint as céatadáin, in ionad picteilíní, chun luachanna sizing.
Ag baint úsáide as Céatadáin do Luachanna Leibhéil
Nuair a úsáideann tú na céatadáin chun leithead a bhunú le haghaidh eilimint, beidh an méid iarbhír a thaispeánann an eilimint ag athrú ag brath ar an áit a bhfuil sé sa doiciméad. Is luach coibhneasta iad na céatadáin, rud a chiallaíonn go bhfuil an méid a thaispeántar i gcomparáid le heilimintí eile i do dhoiciméad.
Mar shampla, má leagann tú leithead íomhá go 50%, ní chiallaíonn sé seo go taispeánfaidh an íomhá ag leath dá ghnáthmhéid. Is míthuiscint choitianta é seo.
Más rud é go bhfuil íomhá 600 picteilín ar fud an domhain, níl sé sin ag baint úsáide as luach CSS chun é a thaispeáint ag 50% go mbeidh sé 300 picteilín ar leithead sa bhrabhsálaí gréasáin. Ríomhtar an luach céatadáin seo bunaithe ar an eilimint ina bhfuil an íomhá sin, ní mhéid dúchais an íomhá é féin. Más é 1000 coisín an coimeádán (a d'fhéadfadh a bheith ina rannán nó ar eilimint HTML eile), taispeánfar an íomhá ag 500 picteilín ós rud é go bhfuil 50% ar an leithead sin ar an gcoimeádán. Má tá an eilimint ina bhfuil 400 picteilín ar leithead, ní thaispeánfar an íomhá ach ar 200 picteilín, ós rud é gur luach 50% den choimeádán é an luach sin. Tá méid 50% ag an íomhá atá i gceist anseo atá ag brath go hiomlán ar an eilimint ina bhfuil sé.
Cuimhnigh gur sreabhach an dearadh sofhreagrach. Athróidh leaganacha agus méideanna mar athruithe ar mhéid an scáileáin / gléas . Má cheapann tú seo i dtéarmaí fisiceacha, neamh-gréasáin, is cosúil le bosca cairtchláir a bhfuil tú ag líonadh le hábhar pacála. Má deir tú gur chóir an bosca a leathnú leis an ábhar sin, beidh an méid pacála a theastaíonn uait éagsúil ag brath ar mhéid an bhosca. Tá an rud céanna fíor maidir le leithead céatadáin i ndearadh gréasáin.
Céatadáin atá bunaithe ar Céatadáin Eile
Sa sampla íomhá / coimeádán, úsáid mé luachanna picteilín don eilimint atá ann chun a thaispeáint conas a thaispeánfaí an íomhá sofhreagrach. Go deimhin, bheadh an eilimint ina bhfuil céatadán agus an íomhá, nó eilimintí eile, taobh istigh den gcoimeádán sin ag fáil a luachanna bunaithe ar chéatadán de chéatadán.
Seo sampla eile a léiríonn seo i gcleachtas.
Abair go bhfuil suíomh gréasáin agat ina bhfuil an láithreán iomlán laistigh de roinn le rang "coimeádán" (cleachtas dearadh gréasáin coitianta). Tá trí rannán eile taobh istigh den roinn sin agus déanfaidh tú stíl dheiridh chun iad a thaispeáint mar 3 colún ingearach. D'fhéadfadh go mbeadh an chuma ar HTML mar seo:
Anois, is féidir leat CSS a úsáid chun méid an rannáin "coimeádáin" sin a shocrú le 90% a rá. Sa sampla seo, níl eilimint eile ag an rannán coimeádán atá timpeall air seachas an comhlacht, nach bhfuil aon luach ar leith leagtha síos againn. De réir réamhshocraithe, beidh an comhlacht mar 100% d'fhuinneog an bhrabhsálaí. Dá bhrí sin, beidh an céatadán rannáin "coimeádán" bunaithe ar mhéid an fhuinneog bhrabhsálaí. De réir mar a athraíonn an fhuinneog brabhsálaí sin i méid, mar sin beidh méid an "choimeádáin" seo. Mar sin, má tá an fuinneog brabhsálaí 2000 pixel ar leithead, taispeánfar an rannán seo ag 1800 pixel. Ríomhtar é seo mar 90 faoin gcéad de 2000 (2000 x .90 = 1800)), arb é méid an bhrabhsálaí é.
Má tá gach ceann de na ranna "col" a fhaightear laistigh den "gcoimeádán" leagtha síos ar mhéid 30%, beidh 540 pixel ar leithead acu sa sampla seo. Ríomhtar é seo mar 30% de na 1800 picteilín a thugann an coimeádán ag (1800 x .30 = 540). Má d'athraigh muid céatadán an choimeádáin sin, d'athródh na rannáin inmheánacha seo freisin ar an méid a léiríonn siad ós rud é go bhfuil siad ag brath ar an eilimint sin.
Bímid ag glacadh leis go bhfanann fuinneoga an bhrabhsálaí ag 2000 picteilín ar leithead, ach táimid ag athrú luach céatadáin an choimeádáin go 80% in ionad 90%. Ciallaíonn sé sin go gcuirfidh sé 1600 pixel ar leithead anois (2000 x .80 = 1600). Fiú mura n-athraíonn muid an CSS ar mhéid ár ranna 3 "col", agus má fhágann siad iad ag 30%, cuirfidh siad ar bhealach difriúil anois ós rud é go bhfuil athrú tagtha ar a n-eilimint ina bhfuil an comhthéacs a bhfuil siad i méid. Rinne na 3 rannáin sin 480 pixel ar leithead gach ceann, atá 30% de 1600, nó méid an choimeádáin (1600 x .30 = 480).
Agus é seo á dhéanamh níos faide, má bhí íomhá taobh istigh de na rannáin "col" seo agus go raibh an íomhá sin ag baint úsáide as céatadán, ba é an "col" féin an comhthéacs dá sizing. Ós rud é gur athraigh an roinn "col" i méid, mar sin bheadh an íomhá taobh istigh de. Mar sin, má athraigh méid an bhrabhsálaí nó an "coimeádán", a dhéanfadh difear do na trí rannán "col", rud a d'athraigh méid an íomhá laistigh den "col." Mar a fheiceann tú, tá gach ceann acu ceangailte nuair tagann sé do luachanna sciath-tiomáinte atá faoi thiomáint.
Nuair a mheasann tú conas a chuirfidh eilimint taobh istigh de leathanach gréasáin nuair a úsáidtear luach céatadáin le haghaidh a leithead, caithfidh tú an comhthéacs ina bhfuil an eilimint sin ina gcónaí i marcáil an leathanaigh a thuiscint.
Go hachomair
Tá ról ríthábhachtach ag céatadáin chun an leagan amach a chruthú do shuíomhanna gréasáin atá freagrach . Cibé an bhfuil tú ag sizing íomhánna go freagrach nó ag baint úsáide as leithead céatadáin chun greille fíor-shreabhán a dhéanamh a bhfuil a mhéideanna i gcoibhneas lena chéile, beidh na ríomhairí seo riachtanach chun an cuma a mhian leat a bhaint amach.