An comhréir le haghaidh fiosruithe meáin leithead an leithead agus an uas-leithead araon
Is éard atá i gceist le dearadh gréasáin fhreagrach cur chuige maidir le leathanaigh ghréasáin a thógáil nuair is féidir na leathanaigh sin a leagan amach agus a gcuma a athrú go dinimiciúil ar bhonn scáileáin an chuairteora . Is féidir le scáileáin mhóra leagan amach a bheith oiriúnach do na taispeántais níos mó sin agus is féidir le feistí beaga, cosúil le fóin phóca, an láithreán gréasáin céanna a fhormáidiú ar bhealach atá oiriúnach don scáileán níos lú sin. Soláthraíonn an cur chuige seo taithí úsáideora níos fearr do gach úsáideoir agus is féidir leis cabhrú le rátálacha inneall cuardaigh a fheabhsú fiú. Is cuid thábhachtach de dhearadh gréasáin sofhreagrach ná Ceisteanna Meáin CSS.
Is cosúil le ráitis choinníollach beag i gceist le Ceisteanna Meáin taobh istigh de chomhad CSS do láithreán gréasáin, rud a ligeann duit rialacha áirithe CSS a shocrú a dhéanfaidh difear ach amháin nuair a chomhlíontar coinníoll áirithe - cosúil le méid na scáileán thuas nó faoi bhun tairseacha áirithe.
Ceisteanna Meáin i nGníomh
Mar sin, conas a úsáideann tú Ceisteanna Meáin ar shuíomh gréasáin? Seo sampla an-simplí:
- Tosódh tú le doiciméad HTML dea-struchtúrtha saor in aisce ar aon stíleanna amhairc (is é sin an CSS atá ann)
- I do chomhad CSS, thosódh tú de ghnáth mar a dhéanann tú tríd an leathanach a stíliú agus bunlíne a leagan síos maidir leis an gcaoi a bhfeicfidh an láithreán gréasáin. Abair gur mhaith leat clómhéid an leathanaigh a bheith 16 picteilín, d'fhéadfá an CSS seo a scríobh: body {font-size: 16px; }
- Anois, b'fhéidir gur mhaith leat an clómhéid sin a mhéadú le haghaidh scáileáin níos mó a bhfuil eastát réadach cuimsitheach acu a dhéanamh. Seo é i gcás ina gcuirfí Ceisteanna Meáin isteach. Tosódh tú Iarratas Meáin mar seo: @media screen and (min-width: 1000px) {}
- Seo é an chomhréir atá ag Iarratas Meáin. Tosaíonn sé le @media chun an Iarratas Meáin féin a bhunú. Ansin, leag tú "an cineál meáin", a bhfuil "scáileán" sa chás seo. Baineann sé seo le scáileáin ríomhairí deisce, táibléad, fóin, etc. Ar deireadh, cuireann tú deireadh leis an Iarratas Meáin leis an "gné meán". In ár sampla thuas, is é sin "lárleithead: 1000px". Ciallaíonn sé seo go dtiocfaidh tús leis an Iarratas Meáin le haghaidh taispeántais le leithead íosta 1000 picteilín ar leithead.
- Tar éis na heilimintí seo de chuid Iarratas na Meán, cuirfidh tú braceán cuartha oscailte agus dúnta cosúil leis an méid a dhéanfá in aon riail gnáth CSS.
- Is é an chéim dheireanach do Iarratas Meáin ná na rialacha CSS a chur ar fáil a theastaíonn uait iarratas a dhéanamh nuair a chomhlíontar an coinníoll seo. Leagann tú na rialacha CSS seo idir na bracaí coilíseacha a dhéanann an Iarratas Meáin, mar seo: @media screen and (min-width: 1000px) {body {font-size: 20px; }
- Nuair a chomhlíontar coinníollacha an Iarratas Meáin (tá 1000 pixel ar a laghad ar an bhfuinneog brabhsálaí), beidh éifeacht ag an stíl CSS seo, ag athrú clómhéid ár láithreán ó na 16 picteilíní a bunaíodh ar dtús chun ár luach nua de 20 picteilín.
Ag Cur Níos Mó Stíleanna
D'fhéadfá a lán rialacha CSS a chur san Iarratas Meáin seo de réir mar is gá chun cuma amhairc do shuíomh gréasáin a choigeartú. Mar shampla, más mian leat an clómhéid a mhéadú ní hamháin go 20 picteilín, ach freisin dath na míreanna go léir a athrú go dubh (# 000000), d'fhéadfá é seo a chur leis:
@media screen agus (min-width: 1000px) {body {font-size: 20px; } p {dath: # 000000; }}Ag cur tuilleadh fiosruithe ar na meáin
Ina theannta sin, is féidir leat níos mó Ceisteanna Meáin a chur le haghaidh gach méid níos mó, agus iad a chur leis an mbileog stíl mar seo:
@media screen agus (min-width: 1000px) {body {font-size: 20px; } p {dath: # 000000; {} @media screen agus (min-width: 1400px) {body {font-size: 24px; }}Thiocfadh tús leis na chéad Cheisteanna Meáin ag 1000 picteilín ar leithead, ag athrú an chlómhéid go 20 picteilín. Ansin, nuair a bhí an bhrabhsálaí os cionn 1400 picteilín, d'athraigh an clómhéid go 24 pixel. D'fhéadfá a lán Ceisteanna Meáin a chur de réir mar is gá ar do láithreán gréasáin ar leith.
Min-Leithead agus Max-Leithead
Go ginearálta, tá dhá bhealach ann le Ceisteanna Meáin a scríobh - trí "min-width" nó "max-width" a úsáid. Go dtí seo, feicthe againn "mion-leithead" i ngníomh. Ciallaíonn sé sin go dtiocfaidh na Ceisteanna Meáin i bhfeidhm nuair a bheidh an leithead íosta sin ar a laghad ag brabhsálaí. Mar sin, beidh ceist a úsáideann "min-leithead: 1000px" i bhfeidhm nuair a bhíonn 1000 pixel ar a laghad ar a laghad ag an mbrabhsálaí. Úsáidtear an stíl seo ar Iarratas na Meáin nuair a thógann tú suíomh ar bhealach "soghluaiste-chéad".
Má úsáideann tú "max-width", oibríonn sé ar an mbealach eile. Bheadh Iarratas Meáin ar "max-width: 1000px" i bhfeidhm nuair a thit an brabhsálaí faoin méid seo.
Maidir le Brabhsálaithe Scothaosta
Is dúshlán amháin le Ceisteanna Meáin ná a n-easpa tacaíochta i leaganacha níos sine ar Internet Explorer. Go deimhin, tá brónna ar fáil ar féidir leo tacaíocht phaiste a fháil le haghaidh Ceisteanna Meáin sna brabhsálaithe níos sine sin, rud a ligeann duit iad a úsáid ar láithreáin ghréasáin inniu agus a chinntiú go fóill nach bhféachann taispeáint an láithreáin sin ar bhrabhsálaí breacaosta níos sine.
Arna eagarthóireacht ag Jeremy Girard ar 1/24/17