Adaptive elrendezése oldalt az oldal -, mint egy útmutató, hogy a példákat részeként a tervezés

Adaptive elrendezés - olyan tevékenység, amelynek célja a teremtés egy weboldal létrehozása, amely könnyen alkalmazkodni, hogy illeszkedjen a böngésző ablakot.

Mi az adaptív oldal elrendezése

Egészen a közelmúltban, amikor közeledik a sok telek alján a böngésző, akkor láthatjuk a csúszka, amely egy görgetés vízszintes oldalt. Ez történt például, ha az Internet Explorer ablakot nem maximalizált, és ez egy viszonylag kis területen. Az is szinte mindig látható, ha a képernyő felbontását, ami képet ad a 800 600, vagy különösen 640 x 480 pixel.

Ma egy ilyen ritkán fordul még a készülékek tulajdonosai. És ennek oka nem csak az, hogy a felbontás a mai HD kijelzők vagy fent, hanem az a tény, hogy az adaptív oldal elrendezése mára szinte szabvány.

Miért és mikor lesz adaptív design?

Az elején a második évtizedében a XXI században volt heves létre kell hozni technológiák fejlesztésére generikus weboldal. A fő feltételezések indította az létrehozására és fejlesztésére adaptív kialakítású, a következők voltak:

• A tömeges beáramlása új felhasználók az interneten;
• megjelenése több eszközök különböző képernyőfelbontást;
• nyomás a keresők, ami kezdett alkalmazni szankciókat a területek, amelyek részt vettek több változata oldalak ugyanazon tartalommal.

Néhány évvel később, egy másik web designer és híres podcaster kiegészítések a fogalmak, amelyek azt mondta kollégája.

Miáltal és hogyan lehet létrehozni egy adaptív elrendezés?

CSS3 - az új generációs Cascading Style Sheets. Ez a technológia célja, hogy megteremtse a szabályokat megjelenítő elemeit egy oldalra a felhasználó böngészőjének. Segítségével azt megadhatja, például a megfelelő méretű egy sejt egy adott felbontás a felhasználó képernyőjén, vagy állítsa be a szabályt, hogy az ember mindig egy bizonyos százalékát a tér (100% - kitöltésével a teljes munkaterület böngésző).

Ez a harmadik generációs megjelent CSS szabály „médialekérdezések”, mely segítségével a kódoló létrehozhat külön osztályokban minden felbontásban.

Egy nagyon fontos pont!

Aki kívánja használni CSS3 elrendezés adaptív kialakítású, tisztában kell lenniük azzal, hogy szemben a CSS2 nem pixel, és alkalmazott százalékokat a harmadik generációs Cascading Style Sheets, hogy meghatározza az objektumok méretét.

Ami a HTML5, majd az ő segítségével is végzik közvetlenül az elrendezést, vagyis az államokban, ahol bizonyos elemeket kell elhelyezni. Tárgyak, hogy alkalmazkodni tudjanak a felbontást a HTML-tag paraméter által előre meghatározott segítségével CSS3 osztályok.

Egy egyszerű példa adaptív elrendezése

Ahhoz, hogy megértsük, mi az adaptív elrendezés, a példák a lehető legegyszerűbb. Ezért azt az esetet, amelyben az előkészített kép automatikusan beállítani, hogy illeszkedjen a böngésző munkaterületet.

Kezdés postai HTML elem magán az oldalon:

Meta DIV - azt jelzi, hogy az összes megkötött is, egy külön egység. Ha a „class” attribútum egy oldalt egy csomó blokkokat. Meg kell érteni a böngésző, mely szabályt alkalmazni egy adott blokk.

Most csak létre kell hoznia magát a szabályt, az úgynevezett,

Ebben a kódot, csak a jogosultságokat az adaptív elrendezése. Különösen azt jelezte, hogy a szélessége (Wight) mindig adja ki a 100% -át a szélessége a böngésző munkaterület, míg a magasság (magasság) automatikusan állítja be.

Ellenőrizze adaptív elrendezése

Akkor lehet, hogy még könnyebb. Annak ellenőrzésére, hogy az adaptív tervezési munka, meg kell tartsa lenyomva a CTRL, majd kattintson a „+” vagy „-”. E művelet után az oldalt kell megfelelően nő vagy csökken, de az elem, amelyre az alkalmazott adaptív elrendezés, tartsa viszonyítva az arányok (vagy valami mást, valamit, ami a szabályzatban meghatározott).

Eszközök, amelyek egyszerűsítik az elrendezés reagáló tervezés

Az adaptív tervezés elrendezés - nagyon időigényes feladat. Ezért, hogy csökkentse az idő a végrehajtás ezen eljárások, akkor jobb, ha speciális eszközöket használnak. Mivel egy ilyen említhetjük ismert keretek Bootstrap *.

Ez eszközkészletet HTML és CSS, például magában foglalja a nagyszámú felkészült osztály sablonokat lehet használni a fejlesztés design. Tartalmaz továbbá egy dinamikus elrendezés, amely megfelel az összes előírásoknak és szabványoknak engedi meg az adaptív elemek.

Ahhoz, hogy használhassa az szükséges, először, hogy ismereteket szerezni magukról közvetlenül a HTML5 és a CSS3, majd megvizsgálja a jellemzői a keret. Ahhoz azonban, hogy jobban megértsék a finomságok dolgozni vele, akkor többször is csökkentheti a fejlesztési idő az adaptív tervezése weboldalak.

* Bootstrap - a szoftver nyílt forráskódú, által kifejlesztett Corporation Twitter Inc. Ingyenesen terjesztett, és egy széles közösség, amely mindig lehetséges, hogy tanácsot kérjen.

Share Cikk: