Amint a folyadék rácsok használt reagáló web design, helyszínrajzokat

Az adaptív tervezés egy folyamat szervezése az elrendezés a helyszínen, így attól függően, hogy milyen típusú felhasználói eszköz vagy a képernyő mérete igazodik az összes fontos információt, hogy kényelmesen lehessen vele. A legtöbb tervező választhat elrendezést alapuló rács, mert könnyebb dolgozni különböző eszközöket.

A helyes választás az Öné: használja (Fluid Grid), hogy hozzon létre az elrendezés fix vagy változó net. Ebben a cikkben bemutatjuk részletesen úszó rács és jelentősége adaptív tervezése.

Mi a Fluid Grid?

Mielőtt elkezd gondolkodni egyedi projektek, fontos, hogy elkezdjük megérteni, mi az úszó rács. Azt hiszem, a legjobb meghatározása folyadék (folyékony) van megadva Wikipedia:

Fluid olyan anyag, amely folyamatosan változik (áramlik) keretében alkalmazott erő - Wikipédia.

Csak azt akarom, hogy tisztázza egy kicsit ez a definíció gyakorlati szempontból. A web design, (úszó) folyékony lesz a tervezés és elrendezése, valamint az alkalmazott erő lesz a változás a méret a képernyő vagy egy felhasználói eszköz.

Nem számít, hogy milyen eszközt a felhasználó a képernyő vagy a készülék méretének, a komponensek az úszó design flow és alkalmazkodni hozzájuk.

A fontossága Fluid grid

Az adaptív háló, mi határozza meg a méretet alapul pixel. Ezért bizonyos típusú eszközök, akkor be kell állítani a szélességét és magasságát kézzel.

Mivel az úszó rács alkalmazkodik természetesen egy szülő konténer, korlátozások függően a képernyő méretét vagy eszközt úgy kell beállítani pontosan a külső tartály határokat.

A mobil eszközök egyre kisebbek, és az emberek szívesebben használják őket. Másrészről, az asztali monitorok egyre több és több nagy felbontású. Tehát nem tud kialakulni adaptív tervezése csak a kis eszközök.

Fluid Rács előnye, hogy be tudjuk állítani a maximális szélességet, és ez továbbra is működni fog a nagy képernyőn, köszönhetően a számítások alapján érdeklődés.

Hogyan működik Fluid Grid?

Használjuk hogy dolgozzon ki egy belső rögzített hálózati rendszer 960 pixel. Ezután az alkalmazkodóképesség elrendezés úgy érjük el, az eltérő pixel méretben különböző méretben kapható.

Ez minden, amit érint fejlesztése révén a pixel. Most létre kell hoznunk egy design alapján adtuk meg. Ő ismert, mint Fluid grid (lebegő nettó).

Ezt követően, mi meg a magasság és a szélesség az egyes elemek aránya az alap mérete, és semmi esetre sem a fix értéket pixel. Ezért, ha a méret a készülék, vagy a képernyő megváltozik, a szélessége és magassága a eleme pedig arányosan ki kell igazítani.

Mielőtt rátérnénk a mélyebb megfontolás Fluid Grid, nézzük meg néhány nagyszerű minták alapján kifejlesztett lebegő rács. Ez lehetővé teszi számunkra, hogy jobban megértsük, hogyan működik az úszó elrendezés.

Dusty patron

Palantir.net

Dress válaszul

Fluid Grid rendszerek és generátorok

Létrehozása úszó rács a semmiből - ez egy nehéz feladat, amihez sok időt és erőfeszítést igényel. Ezért sokkal bölcsebb építeni a meglévő elrendezést CSS Rács Framework és a Grid generátor.

Az alábbiakban felsorolunk néhány szabad CSS-Fluid Grid rendszerek és generátorok:

• apró folyadék rács;
• Változó Rácsrendszerben;
• Fluid Rácsok kalkulátor;
• Fluid Rács bootstrap.

A legtöbb CSS-keretek további beépített funkciók és teszteljük kompatibilitás számos meglévő böngészők. A célja ennek a cikknek a teljes körű feltárásához és milyen Fluid Rácsok és hogyan működnek.

Ezért javaslom, hogy vizsgálják meg egy úszó rács, példáját, amely meg tudjuk érteni az alapelveket adatelemek.

Ahhoz, hogy hozzon létre egy úszó rács, amelyek megfelelnek a követelményeknek, azt fogja használni a változó Rácsrendszerben. Kövesse ezt a linket, és állítsa be a változó értékeket. Fogom használni a következő értékeket.

Oszlop szélesség - 60.
Az oszlopok száma - 12.
A távolság az oszlopok között - 20.

Mint látható, container_12 az elsődleges tartályba. Minden eleme a tervezési kell helyezni a tartályba, a csoporthoz tartozó container_12.

Ezután a különböző dimenziói az elemek, határozzuk százalékában a fő tartályba, meghatározva az osztály .grid_1. grid_2 ... .grid_n. Lebegő rács alkalmazva szerkesztjük oszlopok, amelyek úgynevezett lebegő oszlopok.

Ha a képernyő mérete megváltozik, a szélessége az oszlopok is arányosan szabályzott szülőtároló.

A mi rács már 12 úszó oszlopokat. Lássuk, hogyan ezek az oszlopok kerülnek a szerkezet:

Az alábbiakban kód ebben a részben leírt a rács. További információt találhat anyagok letölthetők ezt a cikket:

Mindegyik készlet alkotóelemeit az osztályon belül container_12 osztály tagja. Ahhoz, hogy hozzon létre egy lebegő oszlopot egy bizonyos szélességű, tudjuk használni a tartály belsejében grid_n osztályban. Ha az általunk használt grid_1 osztály, megkapjuk 1/12 eredeti lyukbőségű ha grid_2 -, akkor 2/12.

Beágyazott lebegő oszlopok

Ha egy CSS-keret, miközben összekapcsolódik lebegő oszlopok nem lesz könnyű. De nem minden a struktúrákat, így könnyen megvalósítható, mint a fenti példa. Szükség lehet létrehozni oszlopok más sorok és oszlopok.

Oszlopok, amelyek egy részét a szülő oszlop, az úgynevezett beágyazott. Nézzük meg, hogyan hozhat létre beágyazott lebegő oszlopok a CSS fájlt, amit korábban létrehozott.

A fenti elrendezés tartalmaz 2 soros. Az első sor két részre osztott 6 oszlopok, és mindegyik e két szakaszok viszont 4 szakaszból 3 oszlop.

Hasonlóképpen, a második sorban van osztva 3 szakaszok 4 oszlopos, és mindegyik 3 szakaszok újra 3 részre 4 oszlopok. Így, ha létrehoz egy beágyazott oszlop a rács. Nézzük meg a kódot szerkezet fentiekben leírt

Először létrehozunk a fő tartályba, és oszd el az oszlopokat, mint mi az előző részben. Az oszlopon belül, létre kell hoznunk egy másik tartályba osztály container_12 beágyazott oszlopok. Most kap 12 több oszlop bázis hat oszlop.

Most 12 al-oszlop lehet osztani, ha ez szükséges. Ez ad egy világos megértése, hogyan lehet létrehozni egy úszó rács és hogyan kell dolgozni beágyazott oszlopok. Menjünk tovább.

Design alapján Fluid grid

A legtöbb kezdő tervezők úgy gondolja, hogy csak adaptív CSS-keret, akkor lesz adaptív kialakítású. Sajnos, nem minden ilyen egyszerű. Lebegő rács alkalmazkodni a változásokhoz a böngésző ablak méretét vagy az eszköz.

Tekintsük a következő példát:

Ez egy lebegő rácsos szerkezetű tárgyalt az előző részekben jelenik meg a kis képernyőkön. Csak rács oszlopok nélküli vonatkozó adatokat. És még az 1. számú nem jelenik meg, ahogy kellene. Mikor jön a valódi tartalom kezdődik egy teljes káosz.

Ebben az esetben van szükség, hogy állítsa be az oszlop szélességét. Ez biztosítja a felhasználók kényelmesen dolgozik a helyszínen.

Beállításához az oszlop szélességét különböző méretben kapható, akkor a CSS médialekérdezés. A fenti forgatókönyv megduplázhatja az oszlopok szélessége és használja a 6 helyett 12 oszlop jobb olvashatóságát a tartalom. Tehát amint látod, site alkalmazkodóképesség nem csak attól függ a lebegő rács.

Test úszó rács

Most, hogy befejezte a beszámolót az elmélet, tudunk lépni létrehozása egyszerű demókat jQuery. Ez segít majd, hogy hogyan mi úszó rács dolgozik különböző képernyőkön. Először is létre fog hozni egy oldal elrendezését és a navigációs menü az alábbiak szerint.

demo verzió

Miután kattintva a link lehet hivatkozni changeGridfunction a megfelelő funkció, amely be van állítva a paraméter típusa használt eszköz.

Található az az oldal alján IFRAME címkét, amely felhasználható betöltéséhez mi úszó rács. Lebegő net media_query.html fájlban szereplő. Most nézzük meg a függvény changeGrid:

A funkció meghívása után, akkor ellenőrizze a készülék típusát a továbbított paramétert. Attól függően, hogy ez a változás .wrapper szélessége (IFRAME), alatt elrendezett szabványos szélességű ehhez az eszközhöz.

Ezután, hogy mi lesz, hogy milyen úszó rács működik a kis képernyőkön.

Lebegő alkalmazott rács media_query.html fájlt. Ez hasonló lesz az egyik, hogy láttuk az előző fejezetben. Ha szeretné beállítani a kódot használja a demo fájlokat. Meg kellett volna valami hasonlót az alábbi ábrát.

következtetés

Lebegő rács lehetővé teszi, hogy hozzon létre adaptív elrendezések dinamikusan alkalmazkodnak a képernyő mérete. A komplexitás a fejlesztés egy lebegő rács minimalizálni lehet a kész CSS-keretek. Ahhoz azonban, hogy a tökéletes adaptív kialakítású, egy úszó rács nem elég.

Vannak esetek, amikor tovább kell testre szerint a tervezési, próbálja, hogy a felhasználók képesek kényelmesen böngészhet a webhelyen.

Remélem tanult ebben a cikkben valami új. Szeretném hallani a visszajelzést rajta.

Fordítása a cikk «Hogyan Fluid Rácsok Dolgozzon Érzékeny Web Design» készítettünk egy csapat barátságos Web design projekt tól Z-ig