Designul arată grozav, dar este complet inflexibil. Să rezolvăm asta.
Să începem cu primul element al #page care conține aspectul nostru și să încercăm ceva cu el:
margine: 36 px auto;
Pixeli negativi, urâți. Nu le putem suporta! Ei bine, nu sunt atât de dezgustători. Rețineți: în layouts cu o lățime fixă nu este nimic greșit! Dar avem nevoie de o rețea mai flexibilă, așa că să încercăm să traducem acești 960 de pixeli în procente.
margine: 36 px auto;
Până acum, totul merge bine. Acum hai să mergem direct la modul. blog. Anterior, când am jucat cu pixeli, am stabilit următoarea regulă:
margine: 0 auto 53px;
Acum, în loc de valoarea în pixeli, trebuie să exprimăm lățimea elementului. blog în termeni proporționali: descrieți-l ca procent din lățimea elementului său care conține. Și din nou, avem nevoie de formula țintă ÷ context = rezultat.
Din aspectul inițial știm că lățimea blogului nostru ar trebui să fie 900х. Acum trebuie să reprezentăm această lățime în unități relative, procentul lățimii elementului părinte pentru element. blog. Deoarece blocul. blog-ul este încorporat în elementul #page, lățimea căreia, în conformitate cu aspectul original este de 960 de pixeli, acesta este contextul nostru.
Să împărțim lățimea. blogul (900) în contextul său (960):
900/960 = 0,9375
Avem 0.9375. Numărul nu pare deosebit de impresionant. Dar, prin mutarea virgulei la două caractere, obținem 93,75% și le punem direct în CSS:
margine: 0 auto 53px;
lățime: 93,75%; / * 900рх / 960рх * /
Deci, am sortat cele două elemente. Dar coloanele?
Lățimea coloanei principale, care este situată pe partea stângă, este de 56 de pixeli, în timp ce lățimea coloanei din stânga este de 331 de pixeli. Vom trebui, de asemenea, să traducem aceste cifre în procente. Dar, înainte de a le înlocui în formula, acordați atenție faptului că contextul sa schimbat. Ultima dată când am împărțit lățimea modulului .blog la 960, lățimea containerului său (#page). Dar, deoarece aceste blocuri sunt imbricate în .log, trebuie să împărțim lățimea coloanei țintă (566 și 331) cu lățimea noului lor context, adică lățimea .blogului (900). Ca rezultat, obținem:
566/900 = 0,628888889
331/900 = 0,367777778
Miscand virgula la doua caractere, ajungem in cele din urma
62,8888889% pentru blocul principal și 36,7777778% pentru blocul alte:
lățime: 62,8888889%; / * 566px / 900px * /
lățime: 36.7777778%; / * 331px / 900px * /
Deci avem un aspect flexibil. Cu ajutorul calculelor mici, am creat un container exprimat în procente și două coloane flexibile, ceea ce ne oferă un aspect care își schimbă mărimea în funcție de mărimea ferestrei browserului. În același timp, lățimea în pixeli se modifică și proporțiile de design rămân originale.