Laborator 4
Fluid layout (pentru definirea layout-ului vz. laboratorul 3) este un tip de design webpage care permite redimensionarea paginii când se modifică dimensiunile ferestrei.
Deși media queries sunt sunt incredibil de puternice, ele au unele limitări. Orice proiectare (design) care prevede o lățime fixă, folosind doar media query pentru a se adapta la diferite viewporturi, va fi "fixată" cu un set de reguli de media queries, trecerea de la o interogare la alta nefiind liniară.
De aceea este mai bine să creăm un design care să fie flexibil, să arate bine în toate viewporturile, nu doar în particular pentru unul. Pentru a rezolva aceasta fluid layout folosește procentajele. Pentru a transforma pixelii în procente se folosește următoarea formulă:
ținta : context = rezultat.
Divul pagina (care este contextul pentru celelalte elemente) va avea proprietatea width de 80%, în loc de 960 px. Divul continut are width 940 px. Rezultatul împărțirii este 0.97916666666666666666666666666667. Atunci divul continut va avea proprietatea width de 97.9166667%. Același procedeu îl aplicăm și pentru celelalte containere.
Pagina este structurată în containere după modelul de mai jos:
Fontul trebuie să aibă mărimea (proprietatea font-size) exprimată în em (rem) și nu în px. Mărimea unui em este în relație cu mărimea contextului său. 1 em = 16px. Avem un element h1 cu mărimea 48 px; valoarea convertită în em este = 3em (48 / 16 = 3). După ce am convertit valorile pagina index arată astfel în modul responsive:
După cum se observă din imagine pagina este responsive, coloanele nu se intersectează. Dar citirea informațiilor este mai greoaie.
Cele două abordări fluid grid și media queries se pot folosi împreună. Le-am folosit împreună pentru a plasa coloanele unele sub altele astfel încât informațiile să poată fi citite mai ușor. Rezultatul:
În @media screen and (max-width: 600px) { am resetat modul de redare a divurilor nu pe rânduri (flex-direction: row), ci pe coloane (column).
Temă. Realizați o nouă pagină index, fără să folosiți proprietatea flex.