Plokkide ümberehitamine CSS-i meediapäringute abil
Õppime tegema plokkide ümberehitamist erineva ekraani laiusega. Näitena rakendame järgmist käitumist:
Alustuseks kirjutame oma plokkide HTML-koodi:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
Nüüd kirjutame meie plokkide vanemale stiilid:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
Nüüd kirjutame stiilid plokkidele endile, märkimata neid omadusi, mida muudetakse meediapäringutega:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
Suure ekraani laiusega laske vahe plokkide vahel arvutatakse automaatselt:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
Määrame meie plokkidele laiuse veidi vähem kui
50%, et jätta ruumi
vahe jaoks:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
Väikese ekraani laiusega paigutame meie plokid veergu:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
Määrame neile alumise vahe:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
Kogume kõik kokku ja saame järgmise koodi:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
}
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
.child {
margin-bottom: 10px;
}
}
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
.child {
width: 49.5%;
}
}