UI:Mobiilvaate praktikum

Leht kuulub aine Kasutajaliidesed juurde.

Harjutuse eesmärk on kirjutada valmis veebileht, mis reageerib dünaamiliselt kasutaja akna laiuse muutumisele, kasutades selleks ainult CSSi. Täpsemalt proovime seda thea Flexbox nimelise standardiga, mis on veel nii uus, et igas brauseris korralikult ei tööta. Seetõttu kasutage selle harjutuse testimiseks brauserit Chrome.

Ülesanne

Teha leht, mis kasutaks flexboxi meetodit koos CSS Media Querydega. Sisu võiks koosneda piltidest + tekstidest, mis muudavad suurust vastavalt brauseri suuruse muutmisele.

Desktopi vaade peaks olema kõikidel ekraanidel, millel on laius suurem kui 1024px.

(Nupud võiks olla keskel üleval. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt)

Tableti vaade peaks jääma 1024px ja 768px vahele.

(Tulbas vähem asju. Äärest ääreni nupud üleval ning suuremad, kui desktopi vaates. Reklaam peaks sellest vaatest puuduma)

Mobiilne vaade võiks olla väiksem kui 768px.

(Pilt peaks erinema desktopi reklaami pildist. Näidata teistsugust reklaami, kui vaadata suurema pikslitihedusega ekraanilt. Javascriptiga peaks peitma menüü, kui minna mobiilsesse vaatesse ning mingi nupu vajutamisel võiks see nähtavale ilmuda)

Esitamine

Esitamiseks saatke tulemus tavalisele aadressile, kirjutades teemareale "UI:Mobiilvaade". Töö nagu ikka üksi või kahekesi.