Web Design Responsiv - Interogări media. Breakpoints tipice dispozitivului. Orientare: Portret / Peisaj.

Susține Lectii-Virtuale!

Breakpoints tipice dispozitivului (Typical Device Breakpoints)

Există tone de ecrane și dispozitive cu înălțimi și lățimi diferite, așa că este greu să creezi un punct de break (breakpoint) exact pentru fiecare dispozitiv. Pentru a menține lucrurile simple, puteți viza cinci grupuri:

Exemplu:
 

/* Dispozitive extra mici (telefoane, 600px și mai mici) */
@media only screen and (max-width: 600px) {...}

/* Dispozitive mici (tablete portret și telefoane mari, 600px sau mai mari) */
@media only screen and (min-width: 600px) {...}

/* Dispozitive medii (tablete landscape, 768px sau mai mari) */
@media only screen and (min-width: 768px) {...}

/* Dispozitive mari (laptopuri / desktop, 992px sau mai mari) */
@media only screen and (min-width: 992px) {...}

/* Dispozitive extra mari (laptop-uri mari și desktop-uri, 1200px sau mai mari) */
@media only screen and (min-width: 1200px) {...}

Orientare: Portret / Peisaj (Landscape)

Interogările media (media queries) pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.

Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Lanscape):

Exemplu:

Pagina web va avea un fundal luminos (lightblue background) dacă orientarea este în modul peisaj (lanscape):

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}