Interogări media CSS - exemple. Interogări media pentru coloane.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
O utilizare obișnuită a interogărilor media este de a crea un aspect flexibil (flexible layout). În acest exemplu, creem un aspect (layout) care variază între patru, două și full-width coloane, în funcție de diferitele dimensiuni ale ecranului:
Exemplu:
/* Creați patru coloane egale care plutesc (floats) unul lângă celălalt */
.column {
float: left;
width: 25%;
}
/* Pe ecranele cu o lățime de 992px sau mai mică, treceți de la patru coloane la două coloane */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Pe ecranele cu o lățime de 600px sau mai mică, faceți coloanele să se stivească una peste alta, în loc una lângă alta */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Sfat: Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox (a se vedea exemplul de mai jos). Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats (după cum se arată mai sus).Exemplu:
/* Container pentru flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Creați patru coloane egale */
.column {
flex: 25%;
padding: 20px;
}
/* Pe ecranele cu o lățime de 992px sau mai mică, treceți de la patru coloane la două coloane */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Pe ecranele cu o lățime de 600px sau mai mică, faceți coloanele să se stivească una peste alta, în loc una lângă alta */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}