Rithim ingearach a choinneáil le CSS agus jQuery

Ábhar

• Cineál a leagan amach
• Rithim ingearach
• Ag rithim an rithim
• Déileáil le híomhánna
• An jQuery a fheabhsú
• Conclúid

• Eolas de dhíth: CSS, jQuery bunúsach
• Éilíonn: jQuery, CSS, HTML
• Am tionscadail: 30 nóiméad
• Íoslódáil comhaid foinse

Ag glacadh leis go ndearann ​​tú ón ábhar amach, an chéad chinneadh chun do dhearadh a chur i bhfeidhm has a bheith bainteach le cineál. Fiú amháin le ní ag roghnú cló cló tá rud éigin déanta agat a théann i bhfeidhm ar do shuíomh. Tá an cineál lárnach i ndearadh cló agus gréasáin, agus tá sé casta; tá go leor téarmaí, cleachtais, rialacha agus teicnící carntha ann a úsáidtear go maith. Baineann an t-alt seo le teicníc amháin chun gné amháin de chineál a bhainistiú, ceann nár dheacair a dhéanamh ar líne ach atá i gcló go rialta: rithim ingearach comhsheasmhach a choinneáil, rud a ligeann dúinn leagan amach gairmiúil a bhaint amach.

Cineál a leagan amach

I gcló, maidir le haon earra a bhfuil méid mór téacs ann, is dóigh gur greille bunlíne bunús an dearaidh. Úsáidtear é chun struchtúr a thabhairt chuig an leathanach agus chun sreabhadh ingearach an ábhair a threorú. Cuirtear beagnach gach rud maidir leis an eangach bhunlíne sin. Ná bíodh imní ort mura n-aithníonn tú na téarmaí, níl aon duine eolach ar bhunlínte nó ar ghreillí bunlíne; tá eolas agat fúthu cheana féin. Smaoinigh ar ais ar scoil, nuair a scríobh tú ar pháipéar líneáilte gan amhras - mar a scríobh tú chuir tú bun do litreacha go néata ar gach ceann de na línte ar an bpáipéar. An eangach bunlíne agus bunlíne i ngníomh. Is líne shamhailteach an bhunlíne a ailíníonn bun na litreacha.Má fhéachann tú ar an alt seo anois, feicfidh tú bunlíne, cé nach bhfuil líne ann i ndáiríre. Cuireann d’inchinn ceann ann duitse, sin an fáth gur féidir leat abairtí a léamh. Na línte ar pháipéar líneáilte? Is eangach bunlíne iad. Díreach ionas go mbeidh d’abairtí díreach, agus socraithe go tráthrialta ionas go mbeidh rithim ingearach rialta ag do théacs.

Rithim ingearach

Is é rithim ingearach a shocraíonn cá bhfuil téacs an leathanaigh suite. Is comhpháirt amháin í a théann i bhfeidhm ar ár gcumas bloic téacs a scanadh agus a léamh, agus cuidíonn sé lenár bhfreagraí mothúchánacha a threorú. Nuair a bhíonn rithim láidir ingearach agus spásáil mhaith ag an téacs braithimid go bhfuil sé gairmiúil, measta, údarásach agus compordach le léamh. Nuair a bhíonn rithim agus spásáil lag sa téacs braithimid go ndéantar níos lú machnaimh air, níos lú gairmiúla, agus go minic bíonn sé níos deacra é a léamh. Is é rithim ingearach inúsáidteacht pháirt amháin agus aeistéitic pháirt amháin.

Ag rithim an rithim

Ar an drochuair, is é an gréasán fós droch-chol ceathrar an chló i dtéarmaí a chumais roinnt cleachtas bunúsach a achtú maidir le cineál. Ar an ngréasán ní féidir linn eangach bunlíne a úsáid ar an mbealach céanna a dhéanann dearthóir priontála (nó leanbh ar scoil) - ní féidir linn bunlíne an téacs a ailíniú le greille bunlíne doiciméad. Níl aon choincheap ag CSS maidir le greille bunlíne. Mar sin, ní shuíonn ár dtéacs go díreach ar línte greille bunlíne. Ina áit sin, beidh sé dírithe go hingearach sa bhearna idir na línte. Is é an rud is fearr is féidir leis an ngréasán a dhéanamh.

Déanaimis praiticiúil le doiciméad samplach. Ar dtús, socróimid an buille trí eangach bhunlíne infheicthe a dhéanamh. Chun seo a dhéanamh, úsáidfimid íomhá cúlra athrá chun línte cothrománacha rialta 22px a tharraingt óna chéile:

1. html {cúlra: #fff url (bunlíne_22.png); }

Hurrah, tá ár bpáipéar líneáilte againn!

Tabharfaidh tú faoi deara nach bhfuil aon rud ag teacht suas. Chun gach rud a dhéanamh suas teastaíonn uainn go mbuailfidh imeall bun na n-eilimintí go léir le ceann de na línte sin. Is é an bealach is éasca chun é sin a dhéanamh ná a chinntiú go dtógann gach gné airde ingearach (corrlaigh san áireamh) atá iolraithe de 22. Seo roinnt CSS a dhéanann go díreach. Tá an t-aonad REM á úsáid agam, ach ag tabhairt cúltaca EM do bhrabhsálaithe nach dtuigeann REM. Tá an coibhéis aonaid PX á chur san áireamh agam i dtuairimí. Mura dtuigeann tú REM / EM fós, d'fhéadfá na luachanna px a úsáid ina ionad - tá siad uile coibhéiseach:

1. html {/ * cló-mhéid: 16px, airde líne: 22px * /
2. cló: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. cúlra: #fff url (bunlíne_22.png); }
5. tá h1, h2, h3, h4, h5, h6 {/ * margin-top agus bun 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. corrlach: 1.375rem 0; }
8. is é clómhéid h1 {/ * 32px, is é airde na líne 44px * /
9. / * em fallback * / font-size: 2em;
10. cló-mhéid: 2rem; airde líne: 1.375; }
11. is é clómhéid h2 {/ * 26px, is é airde na líne 44px * /
12. / * em fallback * / font-size: 1.75em;
13. cló-mhéid: 1.75rem; airde líne: 1.5714285714; }
14. is é clómhéid h3, h4, h5, h6 {/ * 22px, is é airde na líne 22px * /
15. / * em fallback * / font-size: 1.375em;
16. cló-mhéid: 1.375rem; airde líne: 1; }
17. p, ul, blockquote {/ * is é corrlach bun 22px, faightear airde líne ó html (22px) * /
18. / * em fallback * / margin-top: 0; corrlach-bun: 1.375em;
19. barr-imeall: 0; corrlach-bun: 1.375rem; }

Breathnaímid ar an méid a thugann sin dúinn. Tabhair faoi deara conas a ailíníonn an téacs go deas? Ní shuíonn sé ar an mbunlíne, ach tá rithim ingearach intuartha aige. Tá sé go deas slachtmhar.

Déileáil le híomhánna

Déanann íomhánna rudaí níos casta. Féach cad a tharlaíonn dár rithim nuair a chuimsíonn muid cuid. Cuireann siad isteach air cosúil le scipe i dtaifead - tá an luas ceart ach tá an t-am réidh. Athraítear an t-ailíniú. Is amhlaidh toisc nach dócha go mbeidh airde ag íomhánna atá iolrach den bhunlíne, mar sin níl an t-imeall bun ag teacht lenár n-eangach bunlíne.

Chun é a shocrú ní gá dúinn i ndáiríre ach corrlach a chur le gach íomhá, ag déanamh bun na líne corrlaigh lenár n-eangach. Rud atá simplí go leor chun uathoibriú le beagán JavaScript. Seo ár bplean bunúsach:

1. Figiúr amach airde gach íomhá.
2. Féach cé mhéad uair a roinneann an luach bunlíne sa spás ingearach a thógann an íomhá faoi láthair, agus faigh an chuid eile.
3. Dealaigh an chuid eile ón mbunlíne chun an fritháireamh a theastaíonn uainn a chur i bhfeidhm ar an íomhá a thabhairt.
4. Cuir an fritháireamh i bhfeidhm mar chorrlach go bun na híomhá.

Bheadh ​​bun spás ingearach na híomhá ailínithe i gceart anois leis an eangach bhunlíne. Seo bunfheidhm i jQuery a dhéanann é seo:

1. $ (fuinneog) .bind (‘load’, feidhm () {
2. $ ("img"). gach ceann (feidhm () {
3. / * athróg * /
4. var this_img = $ (seo);
5. bunlíne var = 22;
6. var img_height = this_img.height ();
7. / * déan an mhatamaitic * /
8. fuílleach var = parseFloat (img_height% bunlíne);
9. / * cá mhéad a chaithfimid a chur leis? * /
10. var fritháireamh = parseFloat (fuílleach bunlíne);
11. / * an corrlach a chur i bhfeidhm ar an íomhá * /
12. this_img.css ("corrlach-bun", fritháireamh + "px");
13. });
14. });

Cén fáth an fuinneog.bind líne? Toisc go gcaithfimid fanacht go dtí go mbeidh na híomhánna luchtaithe sular féidir linn a méideanna a fháil go hiontaofa. Seo sampla leis an gcód bunúsach seo ag rith.

An jQuery a fheabhsú

Is annamh a bhíonn an domhan simplí, agus mar sin a tharlaíonn sé anseo - ní mór dúinn déileáil le go leor sonraí cur chun feidhme. Cad atá cearr leis an bhfeidhm atá againn? Neart:

• Táirgeann sé torthaí dána le híomhánna atá inlíne seachas snámh nó bloc.
• Dealraíonn sé go bhfuil fabht ar roinnt íomhánna, go háirithe na cinn i gcoimeádáin.
• Ní dhéileálann sé le leagan amach leachtach.
• Ní féidir é a athúsáid.

Nílimid ag iarraidh an t-iompar seo a chur i bhfeidhm ar íomhánna atá inlíne, cosúil leis an aghaidh aoibhinn sa sampla. Tá íomhánna inlíne ailínithe ionas go suíonn an t-imeall bun ar an mbunlíne chéanna leis an téacs (ní an eangach bhunlíne). Ciallaíonn sé sin go ndéantar an íomhá a fhritháireamh go hingearach. Ní thugann CSS ná JS bealach dúinn le fáil amach cá bhfuil bunlíne eilimint téacs, mar sin níl a fhios againn an fritháireamh. Ní mór dúinn neamhaird a dhéanamh d’íomhánna inlíne, agus ár ndeisiúchán a chur i bhfeidhm ar íomhánna atá socraithe dóibh taispeáint: bloc (ar ámharaí an tsaoil, socraítear aon íomhá ar snámh go huathoibríoch chun an bloc a thaispeáint).

Má tá íomhá i gcoimeádán féadfar an corrlach a chuirtear ar an íomhá a chur i bhfolach mar gheall ar shuíomhanna thar maoil ar an gcoimeádán. Chomh maith leis sin, b’fhéidir nach dteastaíonn an corrlach ar an íomhá uainn, ach ar eilimint an choimeádáin ina ionad. Mar shampla, b’fhearr linn corrlaigh a bheith againn ar an mbosca bán ná ar an íomhá taobh istigh den bhosca, ionas gur féidir linn bearnaí aisteach atá le feiceáil sa bhosca a sheachaint.

Ní ritheann an fheidhm ach uair amháin, ach ar dhearadh leachtach athraíonn na híomhánna airde nuair a dhéantar an brabhsálaí a athmhéideanna (déan iarracht an sampla a athrú go rud éigin cúng chun é seo a fheiceáil). Briseann méid na rithime arís. Ní mór dúinn an fheidhm a rith tar éis méid an bhrabhsálaí a athrú chomh maith le hualach tar éis leathanaigh. Tugann leagan amach leachtach fadhbanna eile isteach freisin; is féidir le híomhánna a bheith picteilíní codánacha ar airde, mar shampla 132.34px. Féadann sé sin torthaí gan choinne a chur faoi deara, fiú má chuireann muid corrlach codánach i bhfeidhm (má tá suim agat ann, seo an fáth: trac.webkit.org/wiki/LayoutUnit). Mar sin, caithfimid an íomhá a massage isteach in airde picteilín iomlán chun fabhtanna leagan amach de bharr picteilíní codánacha a sheachaint.

Ar deireadh, ba cheart dúinn feidhm níos inúsáidte a bhaint as seo. Déanta na fírinne, leis an gcastacht a theastaíonn ó réiteach praiticiúil thar an réiteach teoiriciúil, ba cheart dúinn breiseán a dhéanamh is féidir a athúsáid i dtionscadail eile.

Sa sampla deireanach gheobhaidh tú an cód a bhaineann é seo go léir amach. Déantar trácht mór ar an breiseán JavaScript ionas gur féidir leat leanúint leis. Is féidir leat an breiseán a úsáid ach é a ghlaoch mar seo a leanas:

1. $ (fuinneog) .bind (‘load’, feidhm () {
2. $ ("img"). bunlíneAlign ();
3. });

Nó, is féidir leat a rá leis an mbreiseán an corrlach a chur i bhfeidhm ar choimeádán ainmnithe, má tá ceann ann mar thuismitheoir na híomhá:

1. $ (fuinneog) .bind (‘load’, feidhm () {
2. $ ("img"). bunlíneAlign ({container: ’. popup’});
3. });

Conclúid

Is cleachtas dearaidh caolchúiseach ach éifeachtach é rithim mhaith ingearach a choinneáil a úsáidtear go rialta i gcló. Tá na bunphrionsabail ar eolas agat anois, tá eolas oibre agat ar bhunlínte agus ar an eangach bhunlíne, agus tá a fhios agat cuid de na teorainneacha a bhaineann le leagan amach téacs CSS i gcoinne cló. Tá a fhios agat freisin conas oibriú timpeall na dteorainneacha sin, do dhoiciméid a chumadh le rithim ingearach ar bith is mian leat, agus tá uirlis agat chun cabhrú le déileáil le hábhar suaiteach íomhá.

De réir mar a aibíonn CSS leanaimid orainn ag fáil níos mó gnéithe ar aon dul lenár gcol ceathracha cló, mar sin beidh tuiscint mhaith ar chineál níos tábhachtaí chun láithreáin ghréasáin ardchaighdeáin a chruthú. Más maith leat tuilleadh a fhoghlaim faoi chineál i gcoitinne molaim go mór www.thinkingwithtype.com (agus an leabhar a cheannach le dul leis). Má tá tú tar éis ailt CSS faoi chóireáil cineáil tá go leor alt anseo agus in áiteanna eile ar an ngréasán. Molaim freisin teacht suas leis na cinn is déanaí ó Mark Boulton agus Elliot Jay Stocks, a labhraíonn an bheirt acu go minic faoi chineál maidir le dearadh gréasáin go sonrach.

Spraoi a bheith agat!