Vestop létrehozása és előmozdítása oldalak - archívum - pixelről százalék

Tervezés néz ki, de ez elég rugalmatlan. Nézzük erősít ez

Kezdjük az első #page elem, amely a mi elrendezés, és próbálkozzon valami köze hozzá:

margin: 36rh auto;

Pimasz, pimasz pixel. Nem tudják elviselni! Nos, nem az, hogy undorító. Ne feledje, egy fix szélességű elrendezés nincs semmi baj! De szükségünk van a rugalmasabb háló, úgyhogy próbáljuk lefordítani ezeket 960 pixel százalékos.

margin: 36rh auto;

Eddig jó. Most vessünk egy közvetlen modulonként. blog. Korábban, amikor mi voltunk játszani a pixelek, akkor adja meg a következő szabály:

margin: 0 auto 53rh;

Most ahelyett, hogy az értéket pixel, van, hogy kifejezze a szélessége az elem. blog arányos mértékben: leírni százalékában a szélessége az őt tartalmazó elem. És itt megint jöhet képlet cél ÷ context = eredmény.

Az eredeti elrendezését tudjuk, hogy a szélessége a blogunkat legyen 900rh. Most arra van szükség, hogy ezt a szélességet relatív értelemben százalékában szélessége a szülő elem elem. blog. Mivel a blokk. blog ágyazott #page elem, amelynek szélessége összhangban az eredeti elrendezését 960 pixel, ez a mi összefüggésben.

Nézzük osztani a szélességét. A blog (900) annak összefüggésében (960):

900/960 = 0,9375

Sikerült 0,9375. A szám nem tűnik különösen lenyűgöző. De közben a vessző két karakter, megkapjuk 93,75%, és adja meg közvetlenül a CSS:

margin: 0 auto 53rh;

szélesség: 93,75%; / * 900rh / 960rh * /

Szóval, a két elem megértjük. De mi a helyzet a hangszóró?

A szélessége a fő oszlop található, amely a bal oldalon van 56brh, a szélessége a bal oldali oszlop egyenlő 331rh. Ezek a számok is azt kell átalakítani, hogy egy százalékot. De mielőtt helyettesíti őket a képlet, vegye figyelembe, hogy a kontextus megváltozott. Az utoljára megosztott egy modul szélességű .blog 960, szélessége a tartály (#page). De mivel ezek a blokkok vannak beágyazva .blog, meg kell osztani a cél oszlopszélességek (566 és 331) a szélessége az új kontextusban, vagyis a szélessége .blog (900). Ennek eredményeképpen megkapjuk:

566/900 = 0,628888889

331/900 = 0,367777778

Mozgó vesszőt a két karakter, akkor kap egy eredményt

62.8888889% a .main blokk és 36.7777778% .Egyéb egység:

szélesség: 62.8888889%; / * 566px / 900px * /

szélesség: 36.7777778%; / * 331px / 900px * /

Így hát ez egy rugalmas elrendezést. A rendszer segítségével a kistelepülések, hoztunk létre a tartály, százalékban kifejezve, és két flexibilis oszlop ad nekünk az elrendezés, a változó a méretük szerint a méret a böngésző ablakot. Ebben az esetben a szélesség is megváltozik pixel, és a design az arányok maradnak az eredeti.