Introducere în layout-ul pentru diferite ecrane în CSS

În lumea modernă, un site web trebuie să arate bine pe dispozitive cu dimensiuni de ecran diferite.

De obicei, dispozitivele sunt împărțite în patru clase: computere (desktop), laptop-uri, tablete (tablet) și telefoane (mobile).

În trecut, în vremuri străvechi, erau cunoscute dimensiunile populare ale ecranelor pentru toate dispozitivele, din fericire nu erau atât de multe. Și site-urile erau făcute astfel încât să se afișeze corect pe lista cunoscută de rezoluții.

În prezent, au apărut atât de multe dispozitive, încât este imposibil să faci o listă a rezoluțiilor pentru care trebuie făcut un site. Acum se consideră că layout-ul trebuie să se afișeze corect pe orice dimensiune de ecran.

Acest lucru este realizat prin rearanjarea blocurilor în punctele cheie ale layout-ului. În același timp, aceste puncte cheie sunt alese nu pentru anumite dispozitive, ci pentru conținutul site-ului - astfel încât acesta să arate bine.

Între punctele cheie, lățimea elementelor site-ului trebuie să fie flexibilă, pentru a se adapta la lățimea ecranului. Iar în punctele cheie are loc rearanjarea blocurilor în alte poziții.

Layout-ul descris se numește adaptiv sau responsive (responsive). Studiul acestuia este ceea ce vom face în lecțiile următoare.