HTML Responsive Web Design. Interogări media. Responsive Web Page.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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.