Adaptive elrendezés a honlap - részletek és lépésről - ellentétben reagáló site design, layout

Annak érdekében, hogy az elrendezés a webhely néz ki Iphone vagy tabletta - azt) kell igazítani ezeket az eszközöket, és fontos, hogy csináld hatékonyan.

Adaptive Oldal elrendezés (más néven a mobil-barát) - részletes és lépésről lépésre bemutatja, hogyan:

Felhívjuk figyelmét, hogy Yandex és a Google - megvan a maga eszközei, amelyekkel akkor nézd meg a helyszín alkalmazkodóképesség. Az új verzió a Yandex Webmaster ez: eszközök - ellenőrizze mobil oldalakon.

Ha szeretné tudni, hogy hogyan lehet egy adaptív tervezése az oldalon -, hogy ez lesz írva az alábbiakban és a példákban részletesen, de ha nincs készségek dolgozni a css - ez lesz a nehezebb.

Érzékeny Website Design - vállalja a feladatot az oldal szélessége az ablak és az oszlopok szélessége és oldalsáv% -ban, az adaptív - a px.

Megjegyzés: Ha van egy népszerű motort az oldalon, mint a minket wordpress, hogy nincs „fejfájást” adaptív tervezés - minden van egy pár kattintással - könnyű telepíteni és aktiválni a plugint, és minden). Mint például a WP - Régebben Wptouch - nagyon jó.

Meg kell értenünk, hogy alapvetően, ha az adaptív Westcom gyakran manipulált: szélessége (szélesség elem: max-width és min-width), float (körülveszik, akkor el kell távolítani, mivel csökkenti a szélessége az ablak), font-size (felhőkarcoló változása betű).

1) Először regisztrálnia kell egy speciális meta tag a különböző eszközök:

2) kialakítva az oldal paraméterek (magasság és szélesség):

szélességét. 800px
max-szélesség: 90%;
>

Ebben az esetben, ez adott egy fix tartály szélessége, de nem lehet több, mint 90% -át az ablak szélességét, és nagyon kényelmes - ha a helyszínen is lesz alkalmazkodni a az ablak méretét.

3) Css adaptív elrendezése képeket az egész oldalon:

4) Az adaptív elrendezése a honlapon szöveget. ebben az esetben a manipuláció zajlik magasságú szöveg: font-size, és egyéb paramétereket.

Ez CSS elválasztás, ha nincs már végzett a szavakat.

Van egy csomó hibát a betűméret: Yandex élvezi írásban - a szöveg mérete túl kicsi ahhoz, hogy olvasni egy mobil eszköz - ebben az esetben az alábbiak szerint:

test - ez a hiba elkerülésére, és a p tag köti meg kell letenni külön-külön. Ez azért van, mert az a tény, hogy a body tag érdemes font-size: 12 vagy 14 px - ezért ez a hiba jön ki! Így lesz ez a döntés:

5) kiigazítása a 3-oszlop kialakítása, vagy 2 hasábos elrendezés - ez nem nagy ügy, ha végzett div - ó, ez általában szükséges, hogy megszünteti a csomagolást, hogy kerül úszó sem, és a blokkok esik le.

video helyzetbe. relatív;
padding-bottom. 56,25%;
magasságot. 0;
túlcsordulás. rejtett;
> .video iframe.
.video objektum.
.video embed helyzetbe. abszolút;
tetején. 0;
maradt. 0;
szélessége. 100%;
magasságot. 100%;
>

Médialekérdezéseket - Média érdeklődés

Ahhoz, hogy hozzon létre egy érzékeny tervezés gyakran médialekérdezések (az általuk meghatározott szabályok alapján a méret a képernyő szélességének - alapján a képernyő felbontását).

Itt zagotovochka médialekérdezéseket - amelynek értelmében engedélyt nem adaptív tervezése:

/ * Nagy Devices, széles képernyő * /
@media csak képernyő és (max-width. 1200px)

/ * Közepes Devices, asztali * /
@media csak képernyő és (max-width. 992px)

/ * A kis készülékek, tabletták * /
@media csak képernyő és (max-width. 768px)

/ * Extra kis szerkezetek, telefonok * /
@media csak képernyő és (max-width. 480px)

/ * Egyedi, iPhone Retina * /
@media csak képernyő és (max-width. 320) / ** /
>

/ * Egyedi, iPhone Retina * /
@media csak képernyő és (min-szélesség. 320) / ** /
>

/ * Extra kis szerkezetek, telefonok * /
@media csak képernyő és (min-szélesség. 480px) / ** /
>

/ * A kis készülékek, tabletták * /
@media csak képernyő és (min-szélesség. 768px) / ** /
>

/ * Közepes Devices, asztali * /
@media csak képernyő és (min-szélesség. 992px) / ** /
>

/ * Nagy Devices, széles képernyő * /
@media csak képernyő és (min-szélesség. 1200px) / ** /
>

De akkor ne médialekérdezések, meghatározva az oszlopok szélességét, és blokkolja azonnal százalékban.

Amikor a média lekérdezések tetejétől kezdve: minden, ami történik, érvényes max-width: 768 indul és 480.

Mik a problémák az alkalmazkodás oldalak a mobil eszközök

Például Yandex lehet ezt a kérdést - vannak vízszintes görgetés:

Hogy van valami béléssel vagy margin - visszaállítani a szülő szelektor (blokkok), és akkor boldog lesz.

És a végén a Yandex Webmaster ezt mutatja:

Szintén nem 4:00, ez mindig nehéz az első alkalommal! De aztán, egy pár órát, amit tehetünk! És elküldte a webmesternek, hogy még egyszer ellenőrizze, hogy gyorsan - fontos a SEO.