Ombysgging av blokker med media queries i CSS
La oss lære å utføre ombysgging av blokker på ulike skjermbredder. Som eksempel skal vi implementere slik at det ser ut som dette:
La oss starte med å skrive HTML-koden for blokkene våre:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
La oss nå skrive stilene til foreldreelementet for blokkene våre:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
La oss nå skrive stilene til selve blokkene, uten å spesifisere de egenskapene som vil endres av media queries:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
På stor skjermbredde lar vi avstanden mellom blokkene beregnes automatisk:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
La oss sette bredden på blokkene våre til litt mindre enn
50% for å legge til rette for
mellomrom:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
På liten skjermbredde plasserer vi blokkene våre i en kolonne:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
La oss gi dem en nederste margin:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
La oss sette alt sammen og få følgende kode:
.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%;
}
}
