CSS ရှိ Media Queries များဖြင့် Block များကို ပြန်လည်စီစဉ်ခြင်း

မျက်နှာပြင်အကျယ်အမျိုးမျိုးတွင် block များကို ပြန်လည်စီစဉ်နည်းကို သင်ကြပါစို့။ ဥပမာအနေဖြင့် ဤကဲ့သို့အပြုအမူမျိုးကို အကောင်အထည်ဖော်ပါမည်။

ပထမဆုံး ကျွန်ုပ်တို့၏ block များ၏ HTML ကုဒ်ကို ရေးပါမည်။

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

ယခု ကျွန်ုပ်တို့၏ block များ၏ မိဘ element အတွက် style များကို ရေးပါမည်။

css.parent {
  display: flex;
  width: 90%;
  margin: 50px auto;
  border: 1px solid red;
}

ယခု block များအတွက် style များကိုရေးပါ၊ media queries များဖြင့် ပြောင်းလဲမည့် ဂုဏ်သတ္တိများကို မဖော်ပြဘဲထားပါ။

css.child {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid green;
}

မျက်နှာပြင်အကျယ်ကြီးတွင် block များကြားရှိ အကွာအဝေးကို အလိုအလျောက်တွက်ချက်ပါစို့။

css@media (min-width: 500px) {
  .parent {
    justify-content: space-between;
  }
}

ကျွန်ုပ်တို့၏ block များ၏ အကျယ်ကို ခြားနားချက်အတွက် နေရာချန်ရန် 50% ထက် အနည်းငယ်ငယ်သတ်မှတ်ပါ။

css@media (min-width: 500px) {
  .child {
    width: 49.5%;
  }
}

မျက်နှာပြင်အကျယ်သေးငယ်တွင် ကျွန်ုပ်တို့၏ block များကို ကော်လံတစ်ခုအတွင်း ထားပါ။

css@media (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
}

သူတို့အတွက် အောက်ခြားနားချက်ကို သတ်မှတ်ပါ။

css@media (max-width: 500px) {
  .child {
    margin-bottom: 10px;
  }
}

အားလုံးကို စုစည်းပြီး အောက်ပါကုဒ်ကို ရရှိပါမည်။

css.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%;
  }
}