Web Design Responsiv - Interogări media. Ce este o interogare media? Regula @media. Adăugați un Breakpoint.

Susține Lectii-Virtuale!

Web Design Responsiv - Interogări media

Ce este o interogare media? (Media Query)

Interogarea media (Media Query) este o tehnică CSS introdusă în CSS3.

Utilizează regula @media pentru a include un block de proprietăți CSS numai dacă o anumită condiție este adevărată.
Dacă fereastra browserului este de 600px sau mai mică, culoarea de fundal (background color) va fi deschisă la culoare (lightblue):
 

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Adăugați un Breakpoint

Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane și a fost responzive, dar nu arăta bine pe un ecran mic.

Interogările media (Media queries) vă pot ajuta. Putem adăuga un punct de break (breakpoint) unde anumite părți ale designelui se vor comporta diferit pe fiecare parte a punctului de break (breakpoint).




Utilizați o interogare media pentru a adăuga un punct de break (breakpoint) la 768px:

Exemplu:

Când ecranul (fereastra browserului) devine mai mic decât 768px, fiecare coloană ar trebui să aibă o lățime de 100%:

/* Pentru desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* Pentru telefoane mobile: */
  [class*="col-"] {
    width: 100%;
  }
}