Ábhar
- Íomhánna freagracha
- Feidhmíocht
- Luchtú coinníollach agus leisciúil
- Clóscríbhneoireacht sofhreagrach
- Ceisteanna ó na meáin i JavaScript
- Feabhsú forchéimnitheach
- Leagan Amach
- Leagan amach greille CSS
- Faoi dheireadh
Fuaimeann dearadh gréasáin sofhreagrach thar a bheith simplí. Roghnaigh greillí solúbtha don leagan amach, bain úsáid as meáin sholúbtha (íomhánna, físeán, iframes), agus cuir ceisteanna ó na meáin i bhfeidhm chun na tomhais seo a nuashonrú chun an t-ábhar a shocrú ar aon amharcphort. Go praiticiúil tá sé foghlamtha againn níl sé chomh furasta sin i ndáiríre. Coinníonn ceisteanna bídeacha a thagann aníos le linn gach tionscadail muid ag scríobadh ár gcinn, agus ó am go chéile fiú trinsí méarloirg a shnoí ar ár deasca.
Ó thosaigh mé ag leigheas an nuachtlitir Seachtainiúil um Dhearadh Sofhreagrach, bhí an t-ádh orm labhairt le go leor ball den phobal gréasáin agus a dtaithí a chloisteáil. Theastaigh uaim a fháil amach go díreach cad a bhí an pobal i ndáiríre ag iarraidh a fhoghlaim, agus mar sin scaip mé suirbhé ar léitheoirí. Seo na príomhthorthaí:
- Íomhánna freagracha
- Feidhmíocht a fheabhsú
- Clóscríbhneoireacht sofhreagrach
- Ceisteanna ó na meáin i JavaScript
- Feabhsú Forchéimnitheach
- Leagan Amach
Agus na hábhair sin i gcuimhne agam, rith mé sraith podchraoltaí ag iarraidh a gcuid smaointe ar chuid dár gceannairí tionscail. Ina bhfreagraí, bhí pointe amháin d’aon toil: dírigh ar na buneilimintí a chur ina gceart sula dtosaíonn tú buartha faoi theicnící spreagúla agus ardteicneolaíochta. Trí rudaí a thabhairt ar ais go dtí na buneilimintí, táimid in ann comhéadan láidir a thógáil do gach duine, ag leagan síos ar ghnéithe nuair a cheadaíonn comhthéacs na feiste nó an úsáideora.
‘Mar sin ... cad faoi na hardteicnící seo?’ Cloisim tú ag fiafraí. Sílim gurb é Stephen Hay a rinne an t-achoimre is fearr air nuair a dúirt sé: ‘Is í an teicníc deiridh RWD ná tosú trí gan aon ardteicnící RWD a úsáid. Tosaigh le hábhar struchtúrtha agus déan do bhealach suas. Ná cuir ach ceannphointe nuair a bhriseann an dearadh agus nuair a shocraíonn an t-ábhar é agus ... sin é. '
San alt seo, tosóidh mé leis na buneilimintí agus cuirfidh mé sraitheanna castachta de réir mar a cheadaíonn an cás, chun cur leis na hardteicnící sin. Ar aghaidh linn.
Íomhánna freagracha
Bhí meáin sreabháin ina gcuid lárnach de RWD nuair a shainigh Ethan Marcotte é ar dtús. leithead: 100%; , uas-leithead: 100%; oibríonn sé fós sa lá atá inniu ann, ach tá an tírdhreach íomhá sofhreagrach i bhfad níos casta anois. Le líon méadaitheach méideanna scáileáin, dlús picteilín agus gairis chun tacú linn tá níos mó smachta againn.
Shainmhínigh an Grúpa Pobail Íomhánna Sofhreagracha (RICG) na trí phríomhchúram:
- Méid cileavata na híomhá atá á seoladh againn thar an sreang
- Méid fisiceach na híomhá atá á seoladh againn chuig gairis ard DPI
- An barr íomhá i bhfoirm treo ealaíne do mhéid áirithe an amharcphort
Is é Yoav Weiss, le cabhair ó Indiegogo, a rinne an chuid is mó den obair ar chur i bhfeidhm Blink - Google’s fork de WebKit, agus faoin am a bheidh tú á léamh seo seolfar é i Chrome agus Firefox. Seolfaidh Safari 8 srcset, ach níl an tréith méideanna ach i dtógáil oíche agus níl pictiúr> curtha i bhfeidhm go fóill.
Le teacht aon rud nua inár bpróiseas forbartha gréasáin, is féidir go mbeadh sé deacair tús a chur leis. Lig dúinn rith trí shampla céim ar chéim.
img! - Dearbhaigh an íomhá cúltaca do gach brabhsálaí nach dtacaíonn le pictiúr -> src = "horse-350.webp"! - Dearbhaigh gach ceann de na méideanna íomhá i srcset. Cuir leithead na híomhá san áireamh agus an tuairiscitheoir w á úsáid agat chun leithead gach íomhá a chur in iúl don bhrabhsálaí .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Cuireann méideanna an brabhsálaí ar an eolas faoi leagan amach ár láithreáin. Anseo táimid ag rá le haghaidh aon amharcphort atá 64ems agus níos mó, bain úsáid as íomhá a áitíonn 70% den amharcphort -> méideanna = "(min-width: 64em) 70vw ,! - Murab é an t-amharcphort é sin mór, ansin le haghaidh aon amharcphort atá 37.5ems agus níos mó, bain úsáid as íomhá a áitíonn 95% den amharcphort -> (min-width: 37.5em) 95vw ,! - agus má tá an amharcphort níos lú ná sin, ansin bain úsáid as íomhá a áitíonn 100% den amharcphort -> 100vw "! - bíodh alt alt aici i gcónaí .--> alt =" Capall "/>
Ó thaobh feidhmíochta de, is cuma má úsáideann tú min-leithead nó uas-leithead sa tréith méideanna - ach is cuma cén t-ord foinse. Úsáidfidh an brabhsálaí an chéad mhéid meaitseála i gcónaí.
Chomh maith leis sin, cuimhnigh go bhfuilimid ag códú go crua na tréithe méideanna atá le sainiú go díreach i gcoinne ár ndearaidh. D’fhéadfadh sé seo a bheith ina chúis le saincheisteanna ag bogadh ar aghaidh. Mar shampla, má dhéanann tú do shuíomh a athdhearadh, beidh ort athchuairt a thabhairt ar na híomhánna nó na pictiúir go léir agus na méideanna a athshainiú. Má tá CMS á úsáid agat, is féidir é seo a shárú mar chuid de do phróiseas tógála.
Tá breiseán ag WordPress cheana féin chun cabhrú leat. Sainmhíníonn sé an srcset ar chineálacha íomhá caighdeánacha WP agus tugann sé deis duit méideanna a dhearbhú in áit lárnach. Nuair a ghintear an leathanach ón mbunachar sonraí, déanann sé aon lua ar img> a mhalartú agus an marcmharc pictiúr a chur ina ionad.
Bunúsach
- Smaoinigh an gcaithfidh tú íomhá a áireamh i ndáiríre. An bhfuil croí-ábhar na híomhá, nó an bhfuil sé maisiúil? Ciallóidh íomhá amháin níos lú am luchtaithe níos gasta
- Déan na híomhánna a theastaíonn uait a bharrfheabhsú agus is féidir iad a úsáid trí ImageOptim
- Socraigh ceanntásca in éag d’íomhánna ar do fhreastalaí nó ar chomhad .htaccess (féach na sonraí faoi ‘Performance’)
- Soláthraíonn PictureFill tacaíocht polyfill do phictiúir
Ardleibhéal
- Luchtaigh leisciúil do chuid íomhánna ag baint úsáide as breiseán jQuery’s Lazy Load
- Úsáid HTMLImageElement.Sizes agus HTMLPictureElement chun gné a bhrath.
- Ligfidh an breiseán ardleibhéil PictureFill WP, atá le fáil ar Github, duit luachanna leithead agus méideanna íomhá saincheaptha a shainiú
Feidhmíocht
Chun an fheidhmíocht is luaithe a fheictear a fháil ar ár leathanaigh, teastaíonn uainn an HTML agus CSS go léir a theastaíonn chun an chuid uachtarach dár leathanach a sholáthar laistigh den chéad fhreagra ón bhfreastalaí. Is é 14kb an uimhir draíochta sin agus tá sí bunaithe ar uasmhéid na fuinneoige plódaithe laistigh den chéad am turais bhabhta (RTT).
D’éirigh le Patrick Hamann, ceannaire teicniúil frontend ag an Guardian, agus a fhoireann an bacainn 1000ms a bhriseadh ag baint úsáide as meascán de theicnící frontend agus backend. Is é cur chuige an Guardian a chinntiú go seachadtar an t-ábhar riachtanach - an t-alt - chuig an úsáideoir chomh tapa agus is féidir agus laistigh den uimhir draíochta 14kb.
Féachaimis ar an bpróiseas:
- Cliceálann an t-úsáideoir ar nasc Google le scéal nuachta
- Seoltar iarratas blocála amháin chuig an mbunachar sonraí don alt. Ní iarrtar aon scéalta nó tráchtanna gaolmhara
- Tá an HTML luchtaithe ina bhfuil Critical CSS
- sa cheann>
- Tugtar faoi phróiseas ‘Gearr an mustaird’ agus lódáiltear aon eilimintí coinníollach atá bunaithe ar ghnéithe feiste an úsáideora
- Tá aon ábhar a bhaineann leis an alt féin nó a thacaíonn leis (íomhánna alt gaolmhara, tráchtanna alt agus mar sin de) luchtaithe leisciúil ina n-áit
Má dhéantar an cosán rindreála criticiúil a bharrfheabhsú mar seo, tá an ceann> 222 líne ar fad. Mar sin féin, tá an t-ábhar criticiúil a tháinig an t-úsáideoir le feiceáil fós laistigh den ualach pá tosaigh 14kb nuair a rinneadh gzipped air. Is é an próiseas seo a chuidíonn leis an mbacainn rindreála 1000ms sin a bhriseadh.
Luchtú coinníollach agus leisciúil
Feabhsaíonn luchtú coinníollach eispéireas an úsáideora bunaithe ar ghné a ghaireas. Ligeann uirlisí cosúil le Modernizr duit tástáil a dhéanamh ar na gnéithe seo, ach bíodh a fhios agat nach gciallaíonn tacaíocht iomlán i gcónaí toisc go ndeir brabhsálaí go dtugann sé tacaíocht.
Teicníc amháin is ea rud a luchtú a choinneáil siar go dtí go dtaispeánann an t-úsáideoir rún an ghné sin a úsáid. Mheasfaí go mbeadh sé seo coinníollach. Is féidir leat luchtú sna deilbhíní sóisialta a choinneáil siar go dtí go dtéann an t-úsáideoir os cionn na deilbhíní nó go dteagmháilfidh sé leo, nó d’fhéadfá seachaint Léarscáil Google iframe a luchtú ar amharcphointí níos lú nuair is dóigh gur fearr leis an úsáideoir nasc a dhéanamh le feidhmchlár tiomnaithe mapála. Cur chuige eile is ea ‘Gearr an mustaird’ - féach an bosca amach thuas le haghaidh sonraí air seo.
Sainmhínítear luchtú leisciúil mar rud a bheartaíonn tú a luchtú i gcónaí ar an leathanach - íomhánna atá mar chuid den alt, tráchtanna nó earraí gaolmhara eile - ach nach gá dóibh a bheith ann chun go dtosóidh an t-ábhar ag ithe an ábhair.
Bunúsach
- Cumasaigh gzipping do chomhaid agus socraigh ceanntásca in éag don ábhar statach go léir (netm.ag/expire-260)
- Úsáid an breiseán jQuery Lazy Load. Luchtaíonn sé seo íomhánna agus tú ag druidim leis an amharcphort, nó tar éis tréimhse áirithe ama
Ardleibhéal
- Cuir ar bun go tapa nó CloudFlare. Seachadann líonraí seachadta ábhair (CDNanna) d’ábhar statach d’úsáideoirí níos gasta ná do fhreastalaí féin, agus tá roinnt sraitheanna in aisce acu
- Cumasaigh SPDY do bhrabhsálaithe cumasaithe http2 leas a bhaint as gnéithe http2 cosúil le hiarrataí comhthreomhara http
- Ligeann Líon Sóisialta do chuid deilbhíní sóisialta a luchtú go coinníollach
- Ligfidh API na Léarscáileanna Statacha duit léarscáileanna Idirghníomhacha Google a mhúchadh le haghaidh íomhánna. Féach ar shampla Brad Frost ag netm.ag/static-260
- Déanfaidh Ajax Include Pattern snippets ábhar a luchtú ó aitreabúid sonraí roimhe seo, tar éis sonraí nó in ionad sonraí
Clóscríbhneoireacht sofhreagrach
Is éard atá i gceist le clóghrafaíocht ná d’ábhar a dhéanamh éasca a dhíleá. Leathnaíonn clóghrafaíocht fhreagrach é seo chun inléiteacht a chinntiú ar fud réimse leathan gairis agus amharcphort. Admhaíonn Jordan Moore gur rud amháin é an cineál sin nach bhfuil sé sásta beart a dhéanamh de. Buail íomhá nó dhó más gá duit, ach déan cinnte go bhfuil cineál iontach agat.
Molann Stephen Hay an clómhéid HTML a shocrú go 100 faoin gcéad (léigh: fág é mar atá sé) toisc go ndéanann gach brabhsálaí nó monaróir feiste réamhshocrú réasúnta inléite le haghaidh taifeach nó feiste áirithe. I gcás fhormhór na mbrabhsálaithe deisce is é seo 16px.
Ar an láimh eile, úsáideann Moore an t-aonad REM agus cló-mhéid HTML chun clómhéid íosta a shocrú d’eilimintí áirithe ábhair. Mar shampla, más mian leat gurb é 14px líne an ailt i gcónaí, socraigh é sin mar bhunchló ar an eilimint HTML agus socraigh .byline {font-size: 1rem;}. De réir mar a dhéanann tú scála ar an gcorp: cló-mhéid: chun freastal ar an amharcphort ní bheidh aon tionchar agat ar an stíl .by-líne.
Tá fad líne léitheoireachta maith tábhachtach freisin - déan iarracht idir 45 agus 65 carachtar. Tá leabharmharc ann is féidir leat a úsáid chun d’ábhar a sheiceáil. Má tá tú ag tacú le go leor teangacha le do dhearadh, ansin d’fhéadfadh go mbeadh fad na líne éagsúil freisin. Molann Moore úsáid a bhaint as: alt lang (de) {uas-leithead: 30em} chun aon cheisteanna atá ann a chlúdach.
Chun rithim ingearach a choinneáil, socraigh corrlach-bhun i gcoinne bloic ábhair, ul>, ol>, blockquote>, table>, blockquote> agus mar sin de, mar an gcéanna le d’airde líne. Má chuirtear isteach ar an rithim le híomhánna a thabhairt isteach d’fhéadfá é a shocrú trí Baseline.js nó BaselineAlign.js a chur leis.
Bunúsach
- Bunaigh do chló ar chorp 100 faoin gcéad
- Oibrigh in aonaid choibhneasta em
- Socraigh do chuid corrlaigh d’airde líne chun rithim ingearach a choinneáil i do dhearadh
Ardleibhéal
- Feabhas a chur ar fheidhmíocht luchtaithe cló le Enhance.js nó le luchtú cló iarchurtha
- Úsáid Sass @includes le haghaidh ceannteidil shéimeantach.
- Go minic ní mór dúinn an stíl h5 a úsáid i ngiuirléid barra taobh a éilíonn marcáil h2. Úsáid Bearded’s Typographic Mixins chun an méid a rialú agus fanacht séimeantach leis an gcód thíos:
.sidebar h2 {@include ceannteideal-5}
Ceisteanna ó na meáin i JavaScript
Ó shin i leith bhíomar in ann an leagan amach a rialú ar fud réimse amharcphort trí cheisteanna ó na meáin, bhíomar ag lorg bealach chun é sin a cheangal lenár JavaScript a reáchtáil freisin. Tá roinnt bealaí ann chun JavaScript a dhóiteáil ar leithead, airde agus treoshuímh áirithe amharcphort, agus scríobh roinnt daoine cliste roinnt breiseán dúchais JS atá furasta le húsáid mar Enquire.js agus Bainisteoir Stáit Simplí. D’fhéadfá é seo a thógáil leat féin fiú ag úsáid matchMedia. Mar sin féin, tá an cheist agat go gcaithfidh tú do cheisteanna ó na meáin a mhacasamhlú i do CSS agus JavaScript.
Tá cleas néata ag Aaron Gustafson a chiallaíonn nach gá duit do cheisteanna meán a bhainistiú agus a mheaitseáil i do CSS agus i do JS. Tháinig an smaoineamh ó Jeremy Keith ar dtús agus sa sampla seo tá Gustafson tar éis é a chur i bhfeidhm go hiomlán.
Ag baint úsáide as getActiveMQ (netm.ag/media-260), instealladh div # getActiveMQ-faireoir ag deireadh an eilimint choirp agus é a cheilt. Ansin laistigh de shraith CSS # getActiveMQ-watcher {font-family: break-0;} chuig an gcéad cheist sna meáin, font-family: break-1; go dtí an dara ceann, cló-theaghlaigh: briseadh-2; go dtí an tríú agus mar sin de.
Úsáideann an script watchResize () (netm.ag/resize-260) le seiceáil an bhfuil méid an amharcphort athraithe, agus ansin léann sé an cló-theaghlach gníomhach ar ais. Anois is féidir leat é seo a úsáid chun feabhsuithe JS a nascadh cosúil le comhéadan tabáilte a chur le dl> nuair a cheadaíonn an t-amharcphort, iompar bosca solais a athrú, nó leagan amach tábla sonraí a nuashonrú. Amharc ar an Codepen getActiveMQ ag netm.ag/active-260.
Bunúsach
- Déan dearmad faoi JavaScript le haghaidh amharcphort éagsúil. Feidhmeanna ábhair agus láithreáin ghréasáin a sholáthar d’úsáideoirí ar bhealach is féidir leo rochtain a fháil air ar fud na radharcphort go léir. Níor chóir go mbeadh JavaScript de dhíth orainn riamh
Ardleibhéal
- Modh Gustafson a leathnú trí Breakup a úsáid mar liosta réamhshainithe de cheisteanna ó na meáin agus trí chruthú liosta na dteaghlach cló le haghaidh faire faire getActiveMQ a uathoibriú
Feabhsú forchéimnitheach
Míthuiscint choitianta faoi fheabhsú forásach is ea go gceapann daoine, ‘Ó bhuel ní féidir liom an ghné nua seo a úsáid’, ach i ndáiríre, a mhalairt ar fad atá ann. Ciallaíonn feabhsú forásach gur féidir leat gné a sheachadadh mura dtacaítear leis ach i mbrabhsálaí amháin nó fiú amháin, agus le himeacht aimsire gheobhaidh daoine taithí níos fearr de réir mar a thiocfaidh leaganacha nua.
Má fhéachann tú ar chroífheidhm aon láithreáin ghréasáin, is féidir leat é sin a sheachadadh mar HTML agus iarraidh ar thaobh an fhreastalaí an phróiseáil go léir a dhéanamh. Íocaíochtaí, foirmeacha, Is maith, comhroinnt, ríomhphoist, dashboards - is féidir é a dhéanamh ar fad. Nuair a bheidh an tasc bunúsach tógtha is féidir linn na teicneolaíochtaí uamhnach a chiseal ar a bharr sin, toisc go bhfuil líon sábháilteachta againn chun iad siúd a thagann tríd a ghabháil. Tá an chuid is mó de na cineálacha cur chuige chun cinn ar labhair muid fúthu bunaithe ar fheabhsú forásach.
Leagan Amach
Tá leagan amach solúbtha simplí le rá, ach tá go leor cineálacha cur chuige éagsúla ann. Cruthaigh leagan amach greille simplí le níos lú marcála trí: roghnóir nth-child () a úsáid.
/ * an chéad leithead soghluaiste don ghreille a dhearbhú * / .grid-1-4 {snámhphointe: ar chlé; leithead: 100%; } / * Nuair a bhíonn an amharcphort 37.5em ar a laghad, socraigh an eangach go 50% in aghaidh na heiliminte * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Glan an snámhphointe gach dara heilimint TAR ÉIS an chéad cheann. Díríonn sé seo ar an 3ú, 5ú, 7ú, 9ú ... san eangach. * / .Grid-1-4: an naoú cineál (2n + 1) {soiléir: ar chlé; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Bain an soiléir roimhe seo * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Glan an snámhphointe gach 4ú heilimint TAR ÉIS an chéad cheann. Díríonn sé seo ar an 5ú, 9ú ... san eangach. * / .Grid-1-4: nth-of-type (4n + 1) {soiléir: ar chlé; }}
Slán a fhágáil ag úsáid suíomh agus snámh do do leagan amach. Cé gur fhreastail siad go maith orainn go dtí seo, ba hack riachtanach iad a n-úsáid le haghaidh leagan amach. Tá beirt pháistí nua againn anois ar an mbloc a chabhróidh lenár léanta leagan amach go léir a shocrú - Flexbox agus Greillí.
Tá Flexbox iontach maith do mhodúil aonair, ag rialú leagan amach na bpíosaí ábhair laistigh de gach ceann de na modúil. Déanaimid iarracht leagan amach a sheachadadh ar féidir iad a bhaint amach níos éasca trí Flexbox a úsáid, agus tá sé seo níos fíor fós maidir le suíomhanna freagracha. Chun tuilleadh a fháil amach faoi seo, féach ar threoir CSS Tricks ’ar Flexbox nó an Polyfill Flexbox.
Leagan amach greille CSS
Tá an eangach níos mó don leagan amach macra-leibhéal. Tugann an modúl leagan amach Eangach bealach iontach duit chun cur síos a dhéanamh ar do leagan amach laistigh de do CSS. Cé go bhfuil sé fós sa dréachtchéim i láthair na huaire, molaim an t-alt seo ar leagan amach Eangach CSS le Rachel Andrew.
Faoi dheireadh
Níl anseo ach cúpla comhairle chun do chleachtas sofhreagrach a leathnú. Agus tú ag druidim le haon obair sofhreagrach nua, glac céim siar agus déan cinnte go bhfaigheann tú na buneilimintí i gceart. Tosaigh le d’ábhar, HTML agus cuir eispéiris fheabhsaithe orthu agus ní bheidh aon teorainn leis an áit ar féidir leat do dhearaí a thógáil.
Bhí an t-alt seo le feiceáil ar dtús in eagrán 260 de iris ghlan.
