CSSда медиа-сўров орқали блокларни қайта тузиш
Турли экран энида блокларни қайта тузишни бажаришни ўрганамиз. Мисол учун куйидаги холатни амалга оширамиз:
Бошлаш учун блокларимизнинг HTML кодини ёзамиз:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
Энди блокларимизнинг ота-онаси учун услубларни ёзайлик:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
Энди ўзига блоклар учун медиа-сўровлар орқали ўзгарадиган хоссаларни кўрсатмасдан, услубларни ёзайлик:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
Катта экран энида блоклар ўртасидаги оралиқ автоматик ҳисоблансин:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
Оралиқ учун жой қолдириш учун блокларимизга
50% дан бир оз кичикрок эни берайлик:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
Кичик экран энида блокларимизни устунга жойлаштирамиз:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
Уларга пастки чегара берайлик:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
Ҳаммасини бирлаштириб, куйидаги кодни оламиз:
.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%;
}
}