Preoblikovanje blokov prek medijskih poizvedb v CSS
Naučimo se izvajati preoblikovanja blokov na različnih širinah zaslona. Za primer implementirajmo takšno vedenje:
Za zacetek napišimo HTML kodo naših blokov:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
Zdaj pa napišimo sloge staršu naših blokov:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
Zdaj napišimo sloge samim blokom, ne da bi določali tiste lastnosti, ki se bodo spreminjale z medijskimi poizvedbami:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
Na veliki širini zaslona naj bo prostor med bloki izračunan avtomatsko:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
Nastavimo širino našim blokom nekoliko manjšo
50%, da pustimo prostor
za odmik:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
Na majhni širini zaslona postavimo naše bloke v stolpec:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
Določimo jim spodnji odmik:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
Zberimo vse skupaj in dobimo naslednjo kodo:
.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%;
}
}
