Ábhar
- Féach ar an bhfíseán seo le dul leis an rang teagaisc ...
- Bunús láidir
- Roghanna leagan amach éagsúla
- Snámháin
- Buntáistí snámháin
- Fadhbanna le snámháin
- taispeáint: table-cell
- Buntáistí a bhaineann le taispeáint: cill tábla
- Fadhbanna le taispeáint: cill tábla
- téacs-ailíniú: údar
- Buntáistí a bhaineann le téacs-ailíniú: údar
- Fadhbanna le téacs-ailíniú: údar
- Flexbox
- Buntáistí Flexbox
- Fadhbanna le Flexbox
- Ag féachaint don todhchaí: Leaganacha Teimpléad Eangaí
- Ceachtanna eile a foghlaimíodh
- sizing bosca: teorainn-bhosca
- Feidhm ríomh CSS3
- Ceisteanna ó na meáin i JavaScript
Tá an cinneadh déanta agat. Tá tú ag tabhairt faoi. Tá tú déanta le atreoruithe m-dot, ábhar ar leithligh do ghléasanna éagsúla agus nuashonruithe leanúnacha chun ábhar briste a shocrú i bhfeistí nua. Tá sé sofhreagrach nó bust. Ach cad a tharlóidh tar éis an chéad giota HTML agus CSS a bheith ar an leathanach? Cad a tharlaíonn mura n-oibríonn plean A?
Sheol mé mo chéad suíomh Gréasáin sofhreagrach i mí Dheireadh Fómhair 2011, agus tá os cionn 20 seolta agam ó shin. Níl aon duine acu sin imithe de réir an phlean. D'éiligh gach duine orm dhá bhealach (nó fiú trí cinn) a bheith ar eolas agam chun an tasc atá idir lámha a chur i gcrích. Tá sé chomh tábhachtach crios uirlisí iomlán a bheith agat, mar sin déanaimis féachaint ar an méid a d’fhéadfadh a bheith i do phlean B, C, agus b’fhéidir D, do leagan amach sofhreagrach dearadh gréasáin.
Féach ar an bhfíseán seo le dul leis an rang teagaisc ...
Bunús láidir
Mar léitheoirí glan, táim cinnte gur dúradh leat é seo arís agus arís eile, ach molaim go mór leabhar iontach Ethan Marcotte a phiocadh suas ar an ábhar, Responsive Web Design. Tá jab níos fearr déanta aige ag míniú é i 70 leathanach ná mar a d’fhéadfainn i 2,000. Má tá coincheap an dearadh sofhreagrach nua nó doiléir duit, seo léargas tapa duit. Tá na trí chuid bhunúsacha seo a leanas i ngach dearadh maith sofhreagrach:
- Greillí solúbtha
- Meáin sholúbtha
- Ceisteanna ó na meáin a chinneann an leagan amach
Níos mó ná a bheith an-fhionnuar, rud atá ann, tá cás láidir á dhéanamh gurb é dearadh sofhreagrach an bealach is fearr le suíomh a dhearadh. Mar sin, cén chaoi a bhfuil a fhios againn?
Tá úsáid an ghréasáin ag dul i dtreo soghluaiste, agus go tapa. Is fearr le Google go mbeadh suíomhanna sofhreagrach. Bíonn rátálacha suntasacha ioncaim agus tiontaithe mar thoradh ar athdhearadh sofhreagrach, agus tá sé i bhfad níos simplí ábhar aon láithreáin a bhainistiú ná dhá, trí cinn nó níos mó a bhainistiú. I ndeireadh na dála, tá dearadh sofhreagrach uamhnach. Ach tá a fhios agat é sin. Mar sin déanaimis na niceties a ligean thar ceal agus lean ar aghaidh leis.
Roghanna leagan amach éagsúla
Ag brath ar an staid, tá cúpla uirlis chumhachtach is féidir leat a úsáid chun do dhearadh sofhreagrach a chódú. Níl gach uirlis ceart do gach cás, mar sin beidh a fhios agat cathain agus conas gach ceann de na modhanna seo a úsáid feabhas mór a chur ar do láithreáin ghréasáin.
Snámháin
Cé go bhfuil roghanna eile agam, tá snámháin fós ar dtús ar mo liosta de na modhanna dul ar aghaidh chun suíomh sofhreagrach a leagan amach. Tá siad ró-éasca, agus oibríonn siad i iomarca brabhsálaithe, chun breathnú in áiteanna eile ar dtús.
Buntáistí snámháin
- Déan ábhar timfhilleadh líne an-éasca
- Déan taobhanna clé agus deas na gcolún a ailíniú go héasca leis an gcoimeádán
- Cumas ord na n-earraí ar snámh a aisiompú le snámhphointe: ar dheis nó snámhphointe: ar chlé
- Tacaithe go hiomlán i ngach brabhsálaí
Fadhbanna le snámháin
- Ní thugann eilimintí snámh onóir do airde coibhneasta
- Éilíonn clearfix CSS chun sreabhadh ábhair a choinneáil
- Teastaíonn cuid mhaith CSS chun ailínithe a choigeartú
Ar an iomlán, tá snámháin ar cheann de na leagan amach sofhreagrach is simplí le cur i bhfeidhm. Tá siad thart go deo, agus tá aithne againn orthu go léir. Ach is cinnte go bhfuil cásanna ann a éilíonn modhanna leagan amach eile, nuair: l Teastaíonn ilcholúin le hábhar éagsúil chun an airde bosca céanna a bheith agat. l Ní mór an t-ábhar a bheith dírithe go hingearach nuair atá sé laistigh de shraith.
Beimid ag féachaint ar chuid de na modhanna leagan amach eile is féidir leat a úsáid chun aon fhadhbanna a bhíonn agat a réiteach.
taispeáint: table-cell
Gach uair amháin ar feadh tamaill, ní gá duit ach roinnt ábhar a ailíniú go hingearach. Uaireanta eile nuair a chaithfidh gach colún i ndiaidh a chéile a bheith ar an airde chéanna. Is iad na cásanna seo go díreach an fáth nár fhág táblaí mo bhosca uirlisí leagan amach go hiomlán. Tugann CSS an cumas dúinn tacar eilimintí a dhéanamh le tábla taispeáint: tábla agus taispeáint: table-cell.
.parent {taispeáint: tábla; } .child {taispeáint: tábla-chill; ingearach-ailíniú: lár; }
Tá an modh seo uamhnach.Is dóigh liom go bhfuil mé salach agus cumhach ag baint úsáide as táblaí chun ábhar a leagan amach, fiú más tábla CSS é, ach tá sé thar a bheith áisiúil má tá tú sásta cur suas leis na mionchruinneas a thagann leis.
Buntáistí a bhaineann le taispeáint: cill tábla
- Tá airde comhionann ag gach colún den ábhar
- ingearach-ailíniú: lár
- Tacaithe go hiomlán i ngach brabhsálaí nua-aimseartha
Fadhbanna le taispeáint: cill tábla
- Mar is amhlaidh le táblaí, is moladh leithead na gcill (leathnaíonn siad go leithead an ábhair is leithne)
- Ní féidir leat cealla a fhilleadh ar líne
- B’fhéidir go mbeidh ort marcáil bhreise a chur leis (tuismitheoir div le taispeáint: tábla)
Má úsáidtear i gceart é, taispeáint: table-cell socraíonn sé go leor de na fadhbanna a bhaineann le leathanach a leagan amach ag úsáid eilimintí ar snámh. Ar ndóigh, tá cásanna eile ann a bhféadfadh cur chuige níos uathúil a bheith ag teastáil maidir le leagan amach.
téacs-ailíniú: údar
Táimid go léir ann: an cliant atá ag iarraidh leagan amach a ailíníonn 30 bloc-eilimintí den mhéid céanna i ngreille. B’fhéidir gur pictiúir, físeáin, nó tuairiscí táirge a bhí ann. Theastaigh uathu freisin go mbeadh na heilimintí clé agus deas ag teacht leis an ábhar thuas.
Tá sé seo inúsáidte, ach é a thaispeáint: ní rogha é cill tábla toisc nach gceadaíonn sí timfhilleadh, agus teastaíonn méid snámh CSS nach féidir a choinneáil go praiticiúil le heilimintí snámh agus tú ag láimhseáil na n-imeall ag gach briseadhphointe ar eilimintí 3n + 3, 4n + 4, 5n + 5, agus mar sin de.
Tá an cás seo saindeartha do theicníc ar léigh mé faoi den chéad uair i bpost a scríobh Patrick Kunka dar teideal Text-align: Justify and RWD, agus tá sé ina stáplacha de mo bhosca uirlisí leagan amach: ag baint úsáide as téacs-ailíniú: údar ar an eangach. Tá sé simplí é sin a dhéanamh, tacaítear go maith leis an gcód i ngach brabhsálaí nua-aimseartha, agus tá na leagan amach a chruthaíonn sé soladach.
.grid {text-align: údar; } .grid-item {taispeáint: inlíne-bloc; leithead: 22.5%; téacs-ailíniú: ar chlé; ingearach-ailíniú: barr; corrlach-bun: 3.333333333333333%; } .grid-mír :: i ndiaidh {content: ’’; taispeáint: inlíne-bloc; leithead: 100%; } .grid-item-extra {taispeáint: inlíne-bloc; teorainn: 0; corrlach: 0; }
Tá roinnt gotchas bainteach le taispeáint: inlíne. Is í an tsaincheist is mó ná an gá le marcáil bhreise. Mar téacs-ailíniú: údar ailíneoidh an mhír ghreille deireanach sa tsraith dheireanach i gceart, fágfaidh aon líon eilimintí sa tsraith sin níos lú ná an t-uasmhéid spás folamh ar imeall na róimhe sin. Cuir divs breise leis a líonann an tsraith sin (le a airde: 0) socraíonn sé an fhadhb seo. Tá an ::tar éis cinntíonn bréag-eilimint nach é an tsraith dheireanach de ghreilleatair an tsraith iarbhír dheireanach, agus mar sin údaróidh sé na míreanna greille i gceart.
Déanann Kunka sár-obair chun an próiseas a imlíne ina phost, mar sin molaim é a sheiceáil nuair a fhaigheann tú seans. Mar sin, chun achoimre a dhéanamh ar:
Buntáistí a bhaineann le téacs-ailíniú: údar
- Gan corrlaigh a ríomh idir eilimintí
- Filleadh líne éasca i liostaí fada eilimintí
- Ailínigh na taobhanna clé, deas agus barr
- Tacaithe in IE8 + agus gach brabhsálaí nua-aimseartha
Fadhbanna le téacs-ailíniú: údar
- Éilíonn an teicníc marcáil bhreise
- Eascraíonn "saincheisteanna" clóghrafaíochta ó bhloc inlíne
Níor aimsigh mé cás fós ina bhfuil na fadhbanna seo chomh mór sin gur fiú an teicníc leagan amach seo a thréigean. Tá sé ró-chumhachtach neamhaird a dhéanamh in ainm na marcála pristine. Cruthaíonn athruithe simplí ar airíonna leithead agus corrlaigh taobh istigh de cheisteanna ó na meáin roinnt leagan amach eangaí iontach solúbtha:
.grid-mír {leithead: 48%; } Scáileán @media amháin agus (min-width: 48em) {.grid-item {width: 31%; }} scáileán @media amháin agus (min-width: 64em) {.grid-item {width: 22%; }} scáileán @media amháin agus (min-width: 80em) {.grid-item {width: 12%; }}
Go dtí seo, tá flótaí clúdaithe againn, taispeáint: table-cell, agus téacs-ailíniú: údar. Ach chomh húsáideach agus atá siad uile, tá cásanna ann ina n-oibreoidh siad agus nach n-oibreoidh siad, agus is minic a bhíonn sé deacair é sin a chinneadh go dtí go mbeidh trí uair an chloig caite agat ag iarraidh leagan amach briste a shocrú. Tá an ceathrú modh leagan amach ar fáil anois, atá comhoiriúnach leis an gcuid is mó de na brabhsálaithe, agus is é an modh pearsanta is fearr liom chun dearadh a leagan amach.
Flexbox
Le déanaí, rinne Eric Meyer tweetáil, "Lig dom é a chur ar an mbealach seo: is cuma cé chomh corraithe is atá tú faoi flexboxes CSS, táim sásta geall a dhéanamh nach bhfuil tú in áit ar bith corraithe go leor." Ní fhéadfainn aontú leis níos mó. Gach uair a thagaim ar fhadhb leagan amach eile nach bhfuilim cinnte conas í a réiteach, is réiteach bunaithe ar Flexbox é an deisiúchán de ghnáth le cúlghairm “feidhmiúil”.
Beidh mé i dteagmháil le Flexbox anseo, ach seo siúlóid iontach de Flexbox, scríofa ag Stephen Hay, mar sin déan seiceáil air má chaill tú é.
Buntáistí Flexbox
- Nuair a gheobhaidh tú é, is furasta an CSS do Flexbox a scríobh
- Tá sé an-solúbtha. Is féidir leat beagnach rud ar bith a dhéanamh
- Den chéad uair, tá fíor-lárú ingearach agus cothrománach againn le Flexbox (corrlach: uathoibríoch)
Fadhbanna le Flexbox
- Ag an bpointe seo, caithfidh tú trí chomhréir éagsúla a scríobh, a bhfuil tacar gnéithe an-difriúla acu
- Mar is ceart anois, ní thacaítear leis ach in IE10 +, Chrome, agus Safari (agus tacaíocht pháirteach i Firefox)
Chun déileáil le neamhábaltacht roinnt brabhsálaithe Flexbox a thabhairt i gceart, caithfear plean cúltaca a chuimsíonn Modernizr, agus modh leagan amach amháin eile ar a laghad a bhfuil cuntas air thuas, a úsáid. Coinnigh i gcuimhne, ón alt seo, go bhfilleann Modernizr in Firefox bréagach ar thástáil tacaíochta Flexbox toisc nach dtacaíonn sé fillte-fillte, ach tá an fhoireann ag iarraidh é sin a athrú.
Ag féachaint don todhchaí: Leaganacha Teimpléad Eangaí
Chomh uamhnach agus chomh cumhachtach is atá Flexbox, tá sé ró-innealtóireachta le haghaidh a lán de thascanna leagan amach an lae inniu. Má tá leagan amach bunúsach sofhreagrach á lorg agat do do bhlag nó do leathanach baile trí cholún, d’fhéadfadh an iomarca cumais agus castachta atá ag Flexbox a bheith agat. Cuir isteach an Teimpléad Leagan Amach Eangaí CSS3 nua.
Níl aon tacaíocht iarbhír ón mbrabhsálaí ag an modúl measartha anaithnid seo a oibríonn tríd an W3C. (Tá an tacaíocht IE11 teoranta don chuid chasta neamhshuaimhneach.) Má fhéachann tú ar a leathanach ar caniuse.com, tá an iomarca de na brabhsálaithe gan tacaíocht a thaispeántar beagáinín díspreagtha. Ach nuair a thiocfaidh sé, beidh sé iontach simplí, go háirithe do dhearthóirí atá níos compordaí leis an smaoineamh ar leagan amach amhairc ná leagan amach cód eitneach.
.header {flow: ’a’; } .main {sreabhadh: ’b’; } .sidebar {sreabhadh: ’c’; } .footer {sreabhadh: ’d’; } comhlacht {display: ‘a’ ’b’ ’c’ ’d’; } Scáileán @media amháin agus (min-width: 48em) {corp {taispeáint: ‘aaa’ ’bbc’ ’ddd’; }}
Is gearr go mbeidh sé an-éasca d’fhorbróir nua-thionscanta leagan amach leathanaigh a athrú go tapa, ach trí ord “bbb” a athrú go “bbc”. Is fíor an dul chun cinn é sin.
Ceachtanna eile a foghlaimíodh
Uaireanta tógann sé níos mó ná straitéis mhaith leagan amach chun go n-oibreoidh dearadh sofhreagrach go maith. Tá cúpla cleas foghlamtha agam le cúpla bliain anuas a chuidigh go mór liom. Nuair a iarrann daoine cabhair orm, bíonn iontas orm i gcónaí an líon daoine nach bhfuil na coincheapa réasúnta simplí seo ar eolas acu. Má tá aithne agat orthu, go hiontach! Déan neamhaird orthu agus tabhair an t-alt seo do do dev sóisearach. Mura bhfuil aithne agat orthu, léigh é agus lig ort go ndearna tú (is féidir leat buíochas a ghabháil liom níos déanaí).
sizing bosca: teorainn-bhosca
Féach ar seo:
*, * :: roimh, * :: i ndiaidh {box-sizing: border-box; }
An riail shimplí seo a thacaigh an bealach ar fad ar ais trí IE8 (le -moz- agus -webkit- Insíonn réimíreanna) don bhrabhsálaí leithead eilimint a ríomh lena n-áirítear a stuáil agus a theorainn, seachas díreach an t-ábhar mar atá réamhshocraithe. Leithead: 50% i ndáiríre 50%, fiú le stuáil agus teorainn, a shocraíonn na saincheisteanna a mbíonn an oiread sin forbróirí ag déileáil leo agus iad ag snámh le heilimintí sreabhach le stuáil agus le teorainn.
Feidhm ríomh CSS3
Luachanna a ríomh ag baint úsáide as an calc () Is é feidhm i CSS ceann de na cleasanna freagracha is fearr liom. Leithead: 70% agus leithead: 30% atá éasca, ach cad más mian leat leithead statach ar cheann den dá cholún?
Leithead: 70% agus leithead: 200px níl sé ag obair beagnach chomh maith. Sin an áit a calc () Tagann feidhm isteach. Tugann an fheidhm CSS seo an cumas duit luach a ríomh ag úsáid tomhais le dhá aonad éagsúla.
Mar shampla:
.content {width: calc (100% - 220px); } .sidebar {width: 200px; }
Ceisteanna ó na meáin i JavaScript
Má tá leithead an scáileáin á úsáid agat chun teagmhas i JavaScript a spreagadh agus má theastaíonn uait go dtarlódh sé ag an leithead céanna le do cheannphointe, $ (fuinneog) .width () nó window.outer Leithead tá siad míchruinn agus neamhréireach ar fud na mbrabhsálaithe. Níl aon bhealach gur féidir leat brath go compordach ar na leitheadanna seo má tá tú ag iarraidh roinnt JavaScript a dhóiteáil bunaithe ar mhéid an scáileáin, mar is annamh a mheaitseálann siad na tomhais CSS a úsáidtear le haghaidh fiosruithe ó na meáin. Éiríonn na neamhréireachtaí seo níos measa má tá tú ag úsáid ems i do cheisteanna ó na meáin.
Tugann brabhsálaithe nua-aimseartha, agus IE10 +, an window.matchMedia () feidhm. Tógann sé paraiméadar amháin, ceist sna meáin, agus seolfaidh sé boole ar ais ag taispeáint an bhfuil ceist na meán comhoiriúnaithe nó nach bhfuil. Má tá brabhsálaí níos sine á úsáid agat, tairgeann Modernizr an tástáil .mq is féidir a úsáid ar an mbealach céanna, ach ní chuireann sé botún i leaganacha níos faide ná IE9.
más rud é (window.matchMedia ("(min-width: 48em) agus (uas-leithead: 64em)". lasáin)) {/ * 48em leithead amharcphort 64em * /} eile {/ * 48em> leithead amharcphort nó amharcphort leithead> 64em * /} más rud é (Modernizr.mq ("(min-width: 48em) agus (uas-leithead: 64em)")) {...}
Go raibh maith agat as do chuid ama a thógáil chun an t-alt seo a léamh. Tá súil agam i ndáiríre gur leathnaigh sé do bhosca uirlisí dearaidh sofhreagrach, nó ar a laghad threisigh sé go bhfuil tú á dhéanamh i gceart.
Focail: Josh Broton
Bhí an t-alt seo le feiceáil ar dtús in eagrán glan iris 250.
