CSS တွင် Media Queries မိတ်ဆက်

သီးသန့်ကုဒ်တစ်ခုကို ဖန်သားပြင်၏အကျယ်အပေါ်မူတည်၍ လုပ်ဆောင်နိုင်စေရန် ခွင့်ပြုပေးသည့် သီးသန့်ညွှန်ကြားချက်တစ်ခု @media ရှိပါသည်။

အောက်ပါဥပမာတွင် ဖန်သားပြင်အကျယ်သည် 300px မှ 1200px အတွင်းရှိပါက ကုဒ်အချို့သည် အလုပ်လုပ်ပါမည်။

css@media (min-width: 300px) and (max-width: 1200px) {
  /* ကုဒ်အချို့ */
}

အောက်ပါဥပမာတွင် ဖန်သားပြင်အကျယ်သည် 300px ထက်ကြီးပါက ကုဒ်အချို့သည် အလုပ်လုပ်ပါမည်။

css@media (min-width: 300px) {
  /* ကုဒ်အချို့ */
}

အောက်ပါဥပမာတွင် ဖန်သားပြင်အကျယ်သည် 1200px ထက်ငယ်ပါက ကုဒ်အချို့သည် အလုပ်လုပ်ပါမည်။

css@media (max-width: 1200px) {
  /* ကုဒ်အချို့ */
}

ကျွန်ုပ်တို့၏ media query ထဲတွင် ကုဒ်တစ်ခုခုကို ရေးကြည့်ကြပါစို့။ ဥပမာ၊ ဖန်သားပြင်၏အရွယ်အစားအချို့တွင် အတည်ပြုချက်များကို အနီရောင်သို့ ပြောင်းလဲပါမည်။

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

ယခုတော့ ဖန်သားပြင်အကျယ်ပေါ်မူတည်၍ အတည်ပြုချက်များကို အရောင်အမျိုးမျိုးသို့ ပြောင်းလဲကြည့်ကြပါစို့။

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}

cssp {
  font-size: 15px;
}

cssp {
  font-size: 20px;
}

cssp {
  font-size: 30px;
}