CSS medi soraglary arkaly bloklaryň üýtgedilmegi
Ekranyň dürli giňliklerinde bloklaryň üýtgedilmegini amala aşyrmagy öwreneliň. Mysal üçin şeýle bir ýagdaýy amala aşyralyň:
Ilki bilen, bloklarymyzyň HTML kodyny ýazalyň:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
Indi bloklarymyzyň eýesine stil ýazalyň:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
Indi öz bloklarymyza, medi soraglary bilen üýtgeýän aýratynlyklary görkezmezden, stilleri ýazalyň:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
Ekranyň uly giňliginde, bloklar arasyndaky aralyk awtomatiki hasaplansyn:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
Bloklarymyzyň giňligini, aralyk üçin ýer goýmak üçin, 50%-den birneme pes belgileýäris:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
Ekranyň kiçi giňliginde, bloklarymyzy bir sütuna goýýarys:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
Olara aşaky aralyk bereliň:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
Hemmesini bir ýere ýygnalyň we aşakdaky kody alalyň:
.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%;
}
}