Tehnici Web

Nu esti logat.

Laboratorul 4

(Deadline: 10.12.2017 23:59:59)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Responsive web design

Un design responsive presupune un layout care poate sa se adapteze usor la orice dimensiune de ecran. Este opus ideii de design fix (dimensiuni exacte).

De ce avem nevoie de un design responsive?

Media queries

Un media query este un @-rule care permite definirea unui cod css care se va aplica doar in anumite conditii specificate de query. Regulile CSS de aplicat se vor scrie intre parantezele media query-ului. In media query se specifica doar ce ar fi diferit fata de stilul de baza (cel fara media). De exemplu daca vrem sa definim un stil pentru printrare, scriem:

@media print{ body{ background-color:white; } }

In cadrul media query-urilor putem avea si operatori logici (si, sau, not). De asemenea putem folosi paranteze atunci cand avem de combinat mai multi operatori

Operatorul and

Operatorul and cere ca ambele conditii pe care le leaga sa fie indeplinite. De exemplu:

@media screen and (min-width:250px) and (max-width:700px){ body{ background-color:blue; } }

Codul de mai sus aplica regula background-color:blue; lui body pentru pagina afisata pe ecran in ferestre cu viewport-ul de latime minima 250px, si latime maxima de 700px.

Operatorul ,

Operatorul "," are rol de "sau". De exemplu:

@media (max-width:300px), (min-width:500px){ body{ background-color:blue; } }

In exemplu de mai sus, cand viewport-ul are latimea mai mica de 300px sau mai mare de 700px background-ul elementului body e albastru

Operatorul not

Operatorul not va nega conditia data. Cu alte cuvinte se vor aplica regulile din media query atunci cand conditia negata este falsa.

@media not all and (min-width:350px) and (max-width:550px){ body{ background-color:blue; } }

Atentie, ordinea aplicarii operatorilor este: and, not, ",". Deci not se aplica intregii expresii de mai sus. Adica background-ul albastru va fi pentru viewporturi care nu au latimea intre 350px si 550px. Cu alte cuvinte se va aplica celor cu latimea sub 350px sau peste 550px.

Query-ul de mai sus se poate scrie exchivalent: @media not all and (min-width:350px), not all and (max-width:550px){ body{ background-color:blue; } }

Operatorul only

Operatorul only e redundant, in sensul ca a scrie, de exemplu, "@media screen" e echivalent cu a scrie "@media only screen". Operatorul only e folosit mai mult pentru browsere mai vechi care nu-l recunosc si astfel css-ul din media query e ignorat.

Atentie! Un media query nu creste prioritatea selectorilor, el doar specifica in ce caz sa fie vizibile proprietatile CSS. Astfel, un selector de acelasi tip definit si in CSS-ul general si in CSS-ul din media query va avea aceeasi prioritate, si daca selectorul se refera la elemente comune, se va aplica efectul de cascada.

De exemplu: (fisier:exemplu_media_query_prioritate_a.html)

@media screen and (min-width:450px){ body{ color:red; } } body{ color:blue; }

In cazul de mai sus, indiferent de latimea ferestrei, textul va fi de culoare albastra.

Daca insa avem: (fisier:exemplu_media_query_prioritate_b.html)

body{ color:blue; } @media screen and (min-width:450px){ body{ color:red; } }

Regula CSS din media query va fi vizibila doar cand fereastra depaseste 450px in latime. Prin urmare, pentru ferestre cu latimi mai mici de 450px, culoarea textului va fi albastra, si pentru latimi mai mari de 450px, va fi rosie

Vom da cateva exemple de elemente ce pot fi testate cu un media query:

Atributul media

Daca dorim sa folosim stil inline, putem specifica media query-ul in atributul media.