50 uirlis iontach le haghaidh dearadh gréasáin sofhreagrach

Údar: Monica Porter
Dáta An Chruthaithe: 17 Márta 2021
An Dáta Nuashonraithe: 17 Bealtaine 2024
Anonim
50 uirlis iontach le haghaidh dearadh gréasáin sofhreagrach - Cruthaitheach
50 uirlis iontach le haghaidh dearadh gréasáin sofhreagrach - Cruthaitheach

Ábhar

Mar a thug Ethan Marcotte isteach / a chum sé ina alt "Responsive Web Design" chomh maith lena leabhar is mó díol, tá trí ghné ag teastáil chun suíomh a dhéanamh sofhreagrach:

  1. Greille solúbtha / sreabhach
  2. Íomhánna freagracha
  3. Ceisteanna ó na meáin

Tá neart alt iontach eile ann a chuimsíonn cúiseanna, coincheapa agus teicnící maidir le dearadh sofhreagrach gréasáin, mar sin coinneoimid fócas an ailt seo ar roinnt uirlisí barr a chabhróidh leat a bheith sofhreagrach go freagrach.

Uirlisí chun tosú amach

Sula dtosaíonn tú ag tógáil do shuíomh, is fearr sceitseáil a dhéanamh ar an gcaoi a n-oirfidh na heilimintí ar an leathanach le go mbeidh siad oiriúnach do mhéideanna brabhsálaí éagsúla na bhfeistí éagsúla a mbreathnófar orthu, agus chun an dícheangal a thagann go minic ó smaoineamh go príomha a sheachaint. an dearadh deisce agus an chuid eile de na leaganacha freagracha mar iar-smaoineamh (féach trácht Stephanie (Sullivan) Rewis go háirithe).

01. Bileoga Sceitse Deartha Gréasáin Sofhreagracha

Is pointe tosaigh iontach é an tsraith seo de bhileoga sceitse sofhreagracha, le Jeremy P Alford, chun tús a chur le mapáil a dhéanamh ar an gcaoi a n-athróidh rannáin na leathanach i rúin éagsúla.


02. Leabhar Sceitse Dearaidh Sofhreagrach

Más fearr leat do sceitsí uile a choinneáil in aon áit amháin, ansin b’fhéidir gur mhaith leat smaoineamh ar an leabhar seo faoi cheangal sreinge de 50 bileog sceitse sofhreagrach ag an gcuideachta App Sketchbook.

03. Sreangáin Fhreagracha

Ceann de na deacrachtaí a bhaineann le láithreáin ghréasáin sofhreagracha a thógáil is ea frámaí sreinge a úsáid chun a thaispeáint conas a oibreoidh an dearadh sofhreagrach. Tá an uirlis thurgnamhach seo curtha le chéile ag James Mellers de Adobe chun a thaispeáint conas is féidir le frámaíocht sreang sofhreagrach leagan amach casta a bheith ag obair.


04. Patrúin Leagan Amach Gléasanna

Agus dearadh sofhreagrach á phleanáil tá sé úsáideach a fheiceáil conas a chuaigh daoine eile chuige os do chomhair, mar sin is áit iontach é Patrúin Leagan Amach Gléas Luke Wroblewski, a liostaíonn patrúin móréilimh le naisc chuig samplaí.

05. Tíleanna Stíle

Molann Stíleanna Tíleanna Samanatha Warren teicníc nua don dearadh san aois sofhreagrach; seachas mockups dearadh leithead seasta, tá siad seo cosúil le swatches nó moodboards a léiríonn an cur chuige ginearálta dearaidh gan dul isteach i mionsonraí gráinneach.

Uirlisí le haghaidh greille solúbtha / sreabhach

Mar a dúradh cheana, is é an chéad chomhpháirt atá riachtanach le haghaidh dearadh sofhreagrach greille solúbtha / sreabhach.Tá na rudaí seo a leanas réamhthógtha cheana féin: ní gá duit ach iad a íoslódáil agus beidh tú ar an mbóthar go suíomh níos freagraí.


06. Córas Eangaí Órga

Scaoil Joni Korpi, a d’fhorbair Less Framework freisin, an leagan nua seo de chóras greille iontaofa le haghaidh dearadh sofhreagrach. Meastar go bhfuil sé "fillte" de réir mar a athraíonn sé go héasca ó 16, go hocht, go ceithre cholún, tá forleagan brabhsálaí beag sa Chóras Eangach Órga freisin a nochtann an eangach ar do leathanaigh le haghaidh tástála.

07. Foldy960

D'eisigh na fir chumasach ag Paravel, Inc. an eangach modhnaithe 960.gs a úsáideann siad mar bhunús dá dtionscadail sofhreagracha.

08. SimpleGrid

Tógadh SimpleGrid, le Conor Muirhead, le freagrúlacht bácáilte, mar sin tá sé éasca dul i mbun oibre le do thionscadal sofhreagrach láithreán gréasáin.

09. An Eangach CSS 1140px

Córas greille sofhreagrach iontach eile is ea an Eangach CSS 1140px leis an dearthóir Melbourne, Andy Taylor, a théann ó réiteach leathan deisce síos go soghluaiste.

10. Córas greille colún CSS

Tá an córas eangaí Colún, a chruthaigh stiúrthóir cruthaitheach Pulp + Pixels aka Nick Gorsline, bunaithe ar an gcóras eangaí 1140px, ach le roinnt earraí breise mar threalamh dearaidh le sceitsí agus teimpléid frámaithe sreinge, chomh maith le stíleanna dífhabhtaithe CSS.

11. Córas greille séimeantach

Tá tóir níos mó agus níos mó ar síntí réamhphróiseáilte CSS cosúil le Sass agus LESS, agus úsáideann córas eangaí Séimeantach Tyler Tate iad chun an éifeacht is mó a bhaint amach sa chóras greille seo a mhaíonn nach n-úsáidtear aon aicmí nó eilimintí neamhriachtanacha. Léigh tuilleadh ag códú.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Cosúil leis an gcóras eangaí séimeantach chruthaigh Oddbird's SUSY córas eangaí nach n-úsáideann aon mharcáil bhreise ná ranganna speisialta, ach tá SUSY dírithe ar úsáideoirí Sass amháin (agus a shíneadh, Compass).

13. Gridpak

Tá Gridpak, le Erskine Design, ar cheann de na gineadóirí greille freagracha is nua timpeall. Ligeann sé duit do cholúin agus gáitéir a shocrú ag roinnt mionphointí, ansin aschuir comhaid CSS, JavaScript agus PNG ionas go mbeidh d’fhoireann iomlán ag obair ón bpointe tosaigh céanna.

14. Gridset

Tá beagán rúndiamhair fós ann faoi Gridset mar, nuair a scríobhaim é seo, níor scaoileadh saor é fós. Ach geallann an uirlis le Mark Boulton Design córais greille saincheaptha, neamh-saintreorach, agus bealach chun do ghreillí a shábháil agus a bhainistiú ar líne.

15. Greille Photoshop níos fearr do RWD

Molann Elliot Jay Stocks an seanchaighdeán greille de facto 960px a thréigean agus oibriú ó bhonn 1000px ina ionad, ionas go mbeidh sé níos éasca oibriú leis na ríomhanna céatadáin go léir. Má aontaíonn tú, tá PSD déanta aige duit chun tosú ag obair leis.

16. Greillí Sreabháin

Má tá do dhearadh an-speisialaithe agus má theastaíonn uait do ghreille saincheaptha féin a chruthú, is féidir leat é sin a dhéanamh le .net Dámhachtainí Áireamhán greille sreabhach ainmní núíosach Harry Roberts.

Áireamhán Sofhreagrach

Áireamhán picteilín eile go céatadáin, ach téann an ceann seo le Stu Robson céim níos faide ná a chéile trí na rialacha CSS go léir a ghiniúint duit, rud a chiallaíonn gur féidir leat iad a chóipeáil agus a ghreamú i do bhileoga stíle.

Uirlisí le haghaidh íomhánna sofhreagracha (agus téacs)

Comhpháirt ríthábhachtach eile de dhearadh sofhreagrach gréasáin is ea íomhánna sreabhach. Cé go bhfuil an teicníc chun íomhánna sreabhach a bhaint amach simplí, is cosúil go bhfuil feidhmíocht agus ualach leathanaigh do ghléasanna éagsúla a bharrfheabhsú ar cheann de na dúshláin is mó i ndearadh gréasáin sofhreagrach. Seo roinnt acmhainní chun dul i ngleic leis an gceist.

18. Íomhánna Sofhreagracha

Cheap an Filament Group bealach chun íomhá de mhéideanna iomchuí a sheoladh bunaithe ar réiteach scáileáin. Éilíonn an turgnamh seo le híomhánna soghluaiste ar dtús a dhéanann scála go freagrach agus go freagrach go mbeidh dhá íomhá de mhéideanna éagsúla ann le tagairt a dhéanamh dóibh.

19. Íomhánna Oiriúnaitheacha

Ghlac Matt Wilcox inspioráid ón uirlis Íomhánna Freagracha chun Íomhánna Oiriúnaitheacha a chruthú, a úsáideann PHP agus beagán JavaScript chun íomhánna oiriúnacha a sheirbheáil ar ghléas an úsáideora gan aon mharcáil bhreise a bheith ag teastáil.

20. Sencha.io Src (Tinysrc roimhe seo)

Soláthraíonn Sencha seirbhís scamall a sheolann leaganacha optamaithe d’íomhánna óstáilte do mhéid na feiste a iarrann iad. Le fáil amach conas é a úsáid, féach docs.sencha.com/io/src/.

21. FitText

GEM eile ó Paravel, Inc is FitText.js, breiseán jQuery chun cineál gréasáin ceannlíne a dhéanamh sofhreagrach don dearadh agus don fheiste. Le haghaidh sonraí féach trentwalton.com/2011/05/10/fit-to-scale/.

22. leacText

Spreagtha ag FitText agus algartam SlabType, is breiseán jQuery é slabText Brian McAllister a dhéanann bloic troma téacs a athraíonn méid go freagrach agus a choinníonn sé go leithead sainithe.

Uirlisí le haghaidh ceisteanna ó na meáin

Anois go bhfuil smaoineamh agat ar an gcaoi a n-athróidh do leagan amach le haghaidh gairis éagsúla, eangach sreabhach agus íomhánna sreabhach, teastaíonn fiosruithe ó na meáin uait chun eilimintí an leathanaigh a aistriú go staid sofhreagrachta.

23. Respond.js

Is í an tsaincheist amháin a bhaineann le dearadh sofhreagrach ná go bhfágtar brabhsálaithe nach bhfuil in ann ceisteanna na meán a léamh. B’fhéidir nach ceist í seo le do spriocghrúpa, ach is dea-chleachtas é fós freastal ar úsáideoirí ar bhrabhsálaithe níos sine. Ní thacaíonn Respond.js, le Scott Jehl, ach le hairíonna min-leithead agus uas-leithead.

Le haghaidh tuilleadh féach filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

Cuireann CSS3-Mediaqueries.js, le Wouter van der Graaf, ar chumas leaganacha níos sine de IE agus brabhsálaithe eile gach cineál fiosrúcháin meán a thástáil agus a chur i bhfeidhm go héifeachtach.

25. Oiriúnú.js

Scríobh Ada Smith, údar an chórais ghreille 960.gs bunaidh, Adapt.js, script a aimsíonn toisí brabhsálaí agus nach bhfreastalaíonn ach ar na stílbhileoga riachtanacha - cosúil le ceisteanna ó na meáin ach gan ceisteanna ó na meáin, rud a chiallaíonn go n-oibríonn sé i mbrabhsálaithe níos sine freisin.

26. Categorizr

Seo braiteadh feistí a ndéantar teagmháil leis ón uillinn eile - toimhdeann script Categorizr Brett Jankord go bhfuil feistí soghluaiste mura mbraitear a mhalairt mar dheasc nó mar thaibléad, rud a chuireann ar do chumas acmhainní a sheirbheáil ar bhrabhsálaithe ar bhealach báúil.

Boilerplates dearadh sofhreagrach (agus soghluaiste)

De mheon sreabhadh oibre sofhreagrach éifeachtach, éascaíonn boilerplates an próiseas chun dearaí a bhogadh chuig an mbrabhsálaí níos luaithe ná níos déanaí. Comhcheanglaíonn an chuid is mó de na coirephlátaí seo an chuid is fearr de na huirlisí a luaitear thuas in aon phacáiste néata amháin: greille solúbtha feabhsaithe le scripteanna, agus na fealsúnachtaí soghluaiste ar ábhar á gcur i bhfeidhm ar dtús.

27. 320 agus Suas

Is boilerplate soghluaiste-chéad é Andy Clarke's 320 agus Up a chomhtháthaíonn le go leor uirlisí dearaidh gréasáin nua-aimseartha eile, mar shampla LESS agus Bootstrap (féach # 30). Is bealach éadrom agus lúfar é chun suíomh a chur ar bun go gasta. Seiceáil freisin ár n-agallamh le Andy, ina n-insíonn sé níos mó dúinn faoin leagan nua.

28. Gridless

Is coirephláta HTML5 agus CSS3 é Gridless a fhéadann a bheith mar bhunús do do dhearaí sofhreagracha, le fócas ar chlóscríbhneoireacht agus ar chomhoiriúnacht tras-bhrabhsálaí bácáilte.

29. Cnámharlach

Murab ionann agus an dá choire-phláta roimhe seo, a bhfuil a bpointe tosaigh leis an taifeach is lú, tá an trealamh forbartha Cnámharlaigh, a chruthaigh Dave Gamache, bunaithe ar chóras eangaí 960.gs agus scálaí síos go soghluaiste. Tá creatlach stíl iontach ag cnámharlach freisin d’fhorbróirí stíleanna a thógáil ar a bharr.

30. Bootstrap

Tógtha ag Twitter agus foinse oscailte anois, is creat agus sraith comhpháirteanna é Bootstrap chun suíomh a fháil go tapa ar líne, agus mar leagan a dó oibríonn a chroí-chodanna go freagrach.

Breiseáin, shims agus polyfills

Cé gur gnách go mbíonn brabhsálaithe agus bogearraí nua-aimseartha dírithe ar fhreagrúlacht, uaireanta ní mór dúinn uirlisí breise a úsáid chun eispéireas comhsheasmhach a sholáthar.

31. Breiseán Sofhreagrach

Tá breiseán WordPress scríofa ag Marios Lublinski a gheall go ndéanfaidh sé téama WP reatha ar bith a athrú go téama sofhreagrach. Níl a fhios agam go fóill conas a oibríonn sé seo mar níor eisíodh é mar am na scríbhneoireachta seo, ach má tá sé geallta dá mba cheart dó a bheith an-úsáideach.

32. Overthrow

Oibríonn láimhseáil thar maoil ábhair go maith ar bhrabhsálaithe deisce, ach déanann brabhsálaithe soghluaiste níos sine é a láimhseáil go neamhréireach. Cuireann polyfill Overthrow ón nGrúpa Filament díograiseach díghrádú galánta comhsheasmhach ar fud na bhfeistí, ag cinntiú go bhfaigheann gach úsáideoir soghluaiste an taithí is fearr is féidir.

33. MediaTable

Oibríonn breiseán jQuery Marco Pegoraro, MediaTable, le Respond.js chun cabhrú leat dul timpeall ar an bhfadhb maidir le conas táblaí sonraí móra a thaispeáint ar ghléasanna beaga scáileáin, colúin sofhreagracha a dhéanamh agus scoránaigh seó / seithí a chur leis nuair is oiriúnach.

"Tástáil, tástáil: 1-2-3 ..."

Gné eile den sreabhadh oibre sofhreagrach is ea aithne a bheith agat ar do spriocghléasanna agus ar rúin agus ansin tástáil a dhéanamh orthu.

34. resizeMyBrowser

Tá roinnt toisí réamhshocraithe ag fuinneog do bhrabhsálaí le resizeMyBrowser, ag an bhforbróir frontend Chen Luo, chun leathanaigh atá deartha go freagrach a thástáil nó réamhshocrú nua a chruthú mura féidir leat an ceann a oireann do do riachtanais a aimsiú.

35. sofhreagrachpx

Cosúil le resizeMyBrowser, déanann freagairtíxx, tógtha ag Remy Sharp, do leathanaigh a luchtú i bhfuinneog inar féidir leat an leithead agus an airde a thástáil chun a fháil amach cé chomh maith agus atá do cheisteanna ó na meáin ag lasadh agus cá bhfuil na mionphointí sa dearadh.

Tástáil Deartha Sofhreagrach

Uirlis thar a bheith úsáideach ag an dearthóir agus an forbróir Matt Kersley: níl ort ach URL do shuíomh sofhreagrach a iontráil i dTástáil Dearaidh Fhreagrach chun a fháil amach conas a dhéanann sé méideanna éagsúla brabhsálaí.

37. An Freagróir

Iontráil URL agus taispeánfaidh The Responsinator duit conas a thaispeánann sé i go leor méideanna feiste coitianta - le héifeachtacht róbatach neamhthrócaireach. Tá Tama Pugsley agus Andy Hovey freagrach as an gceann seo.

38. Sofhreagrach.is

Ligeann aithriseoir feiste in-leathanaigh eile, Responsive.is duit URL a chlóscríobh agus ansin é a athrú go tapa idir raon réamhshocruithe éagsúla. Is í an fhoireann atá taobh thiar den aip Typecast atá le teacht a dhéanfaidh é.

39. Screenqueri.es

Uirlis toisí brabhsálaí amháin níos mó, ach déanann Screenqueri.es ó Mandar Shirke idirdhealú a dhéanamh air féin trí shraith fhairsing réamhshocruithe soghluaiste agus táibléid a bheith aige, chomh maith le greille agus rialóirí a fhágann go bhfuil sé níos éasca tomhas breá a dhéanamh.

40. Aptus

Aip eile chun suíomhanna a thástáil ag ilmhéideanna sainithe, ach tá Aptus Mac-dhúchasach. Tá sé ar fáil tríd an Mac App Store, agus tá gnéithe breise cosúil le scáileáin scáileáin éasca agus tacaíocht as líne mar gheall ar a bheith dúchasach.

41. Leabharmharc Dearaidh Fhreagrach

Tá leabharmharc an-simplí ach éifeachtach déanta ag Victor Coulon; nuair a ghníomhachtú tú é ar aon leathanach gréasáin cuireann sé barra uirlisí leis a ligeann duit aistriú idir ceithre thoise scáileáin choitianta ionas go bhfeicfidh tú an chaoi a dtugann do shuíomh méideanna éagsúla.

42. Leabharmharc Tástála Dearaidh Fhreagrach

Ligeann an leabharmharc seo le Benjamin Keen do shaincheapadh níos mó trí ligean duit do mhéideanna gléas féin a shainiú, agus an oiread nó an méid is mian leat. Nuair a chuirtear i ngníomh é taispeánann sé an suíomh ag na méideanna roghnaithe go léir, taobh le taobh chun comparáid éasca a dhéanamh.

43. Scáileán

Ligeann Screenfly, le QuirkTools, duit suíomh a thástáil ar rúin éagsúla ar dheasc, taibléad, soghluaiste agus teilifís. Tá an tástáil deisce teoranta do Safari faoi láthair, agus tá níos mó roghanna ag an táibléad agus ag an bhfón póca le haghaidh feistí agus brabhsálaithe. Tá an teilifís teoranta do Opera.

44. Táscaire Fiosrúcháin Meán

Cuireann Johan Brook bealach íon CSS ar fáil chun tástáil a dhéanamh nuair a spreag an brabhsálaí ceist na meán. Uirlis mhaith eile is ea Táscaire Fiosrúcháin na Meán chun tástáil agus imirt le pointí briseadh dearaidh.

45. Shim

Ceann de na huirlisí a úsáidtear in athdhearadh an Boston Globe, buachaill póstaeir na gluaiseachta RWD, is aip Node.js é Shim a ritheann leathanach gréasáin ar fud ilfheistí ar an líonra Wifi céanna, rud a fhágann go bhfuil sé níos éasca tástáil tras-fheiste a dhéanamh .

46. ​​Tiomáint Isteach

Mura bhfuil freastalaí Node.js agat chun Shim a rith, tá leagan níos simplí déanta ag Scott Jehl ar a dtugtar Drive-In a oibríonn ar an mbealach céanna go bunúsach, ach ag baint úsáide as PHP, Apache, agus comhad .htaccess.

47. Scáth Adobe

Leanann Adobe orthu ag brú isteach i dteicneolaíochtaí gréasáin leis an uirlis iargúlta dífhabhtaithe seo. Suiteáil Scáth agus an síneadh Chrome ar Mac nó Windows, móide an cliant Scáth ar Android nó iPhone, agus is féidir leat leathanaigh ghréasáin a roinnt idir go leor gairis éagsúla.

48. Opera Mobile Emulator + Dífhabhtaithe cianda

Bealach níos éasca le leathanaigh soghluaiste a dhífhabhtú is ea Opera agus an Opera Mobile Emulator a shuiteáil agus an dá cheann a nascadh lena rogha Dífhabhtaithe cianda. Simplí agus tapa le socrú, agus tá buntáiste breise aige tástáil a dhéanamh ar níos mó ná WebKit.

Inspioráid bhreise

Ag iarraidh smaoineamh a fháil ar an gcaoi a bhfuil daoine eile ag déanamh a gcuid dearaí sofhreagrach?

49. MediaQueri.es

Mura bhfaca tú cheana é, tá líon méadaitheach suíomhanna ag an láithreán Mediaqueri.es a thrasnaigh go dtí an taobh sofhreagrach.

50. @RWD

Reáchtálann Ethan Marcotte cuntas Twitter a thugann an nuacht, na huirlisí agus na taispeántais is déanaí ó shaol RWD.

Is breá le Denise Jacobs a bheith ina cainteoir, údar, traenálaí dearaidh gréasáin agus soiscéalaí cruthaitheachta, agus is é Peter Gasston údar The Book of CSS3 agus forbróir gréasáin veteranach a dhéanann blagáil ar Broken Links.

Thaitin seo leis? Léigh iad seo!

  • Leideanna maidir le suíomh Gréasáin soghluaiste a thógáil
  • Na teicnící CSS agus JavaScript is fearr
  • Conas aip a thógáil
  • Na clónna gréasáin saor in aisce is fearr do dhearthóirí
  • Faigh amach céard atá i ndán do Augmented Reality
  • Íoslódáil uigeachtaí saor in aisce: ardtaifeach agus réidh le húsáid anois
Airteagal Roimhe Seo

IDIRGHABHÁIL IN-ROINN: Joe Stewart as Ollmhór
An Chéad Alt Eile

An mhaith, an t-olc agus an ghránna de phóstaeir scannáin
Molta
26 téama punainne WordPress den scoth
Léamh A Bheith Agat

26 téama punainne WordPress den scoth

Bealtaine 2024
Éa caíonn téamaí punainne WordPre leathanach punainne gairmiúil agu an-éifeachtach a chruthú, atá fura ta a chur in eagar agu a na cleanúint mar i mian lea...
Treoir bronntanais Nollag an dearthóra, cuid a trí
Léamh A Bheith Agat

Treoir bronntanais Nollag an dearthóra, cuid a trí

Bealtaine 2024
Cniotáil chniotáilte, aon rud a críobh Jeremy Clark on, T-léinte mai ithe le logáin “fánacha”, rudaí le cait orthu, ock, ock, tocaí ... Fuaireamar go léir ...
Nochtann Aaron Blaise cén fáth ar scor sé dá phost aislingeach ag Disney
Léamh A Bheith Agat

Nochtann Aaron Blaise cén fáth ar scor sé dá phost aislingeach ag Disney

Bealtaine 2024
Tá céal maith ag Aaron Blai e duit má maoinigh tú riamh ar an gcuma a bhí air a bheith ag obair ag Di ney le linn na 1990idí. Tá Aladdin (1992) díreach crí...