HTML Responsive Web Design. Interogări media. Responsive Web Page.

Interogări media (Media Queries)

Pe lângă redimensionarea textului și a imaginilor, este de asemenea obișnuit să folosești interogări media în paginile responsive web.
Cu interogări media, puteți defini stiluri complet diferite pentru diferite dimensiuni de browser.

Exemplu:

Redimensionați fereastra browserului pentru a vedea că cele trei elemente div de mai jos se vor afișa orizontal pe ecrane mari și stivuite vertical pe ecrane mici:



Exemplu:

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Folosiți o interogare media pentru a adăuga un punct de întrerupere la 800px: */
Ecranul @media și(max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* Lățimea este de 100%, atunci când viewport este de 800px sau mai mică */
  }
}
</style>

Responsive Web Page - Exemplu complet

O pagină Responsive Web ar trebui să arate bine pe ecrane desktop mari și pe telefoane mobile mici.