Responsive Design

Media Queries ဆိုတာ ဘာလဲ?

“Screen Size က ဘယ်လောက်ဆိုရင်၊ ဒီ Style ကို သုံးမယ်” လို့ မှာထားတာပါ။

/* ပုံမှန် (Desktop) အတွက် */
body {
  background-color: white;
  font-size: 18px;
}

/* Screen အကျယ် 600px နှင့် အောက် (ဖုန်းများ) အတွက် */
@media (max-width: 600px) {
  body {
    background-color: lightblue; /* ဖုန်းမှာဆို အပြာနုရောင် ဖြစ်သွားမယ် */
    font-size: 16px; /* စာလုံး နည်းနည်း သေးမယ် */
  }
}

Mobile First Approach

Desktop အတွက် အရင်ရေးပြီးမှ ဖုန်းအတွက် လိုက်ပြင်တာထက်၊ ဖုန်းအတွက် အရင်ရေးပြီးမှ Desktop အတွက် ချဲ့တာ က ပိုကောင်းပါတယ်။

/* 1. ဖုန်းအတွက် အရင်ရေး (Base Styles) */
.container {
  flex-direction: column; /* ဖုန်းမှာ ဒေါင်လိုက် စီမယ် */
}

/* 2. Tablet နဲ့ အထက် (min-width) */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Tablet နဲ့ PC မှာ ဘေးတိုက် စီမယ် */
  }
}

Common Breakpoints (အသုံးများသော Size များ)

Device တွေ အများကြီးရှိပေမယ့်၊ အဓိက Breakpoint တွေကို မှတ်ထားရင် အဆင်ပြေပါတယ်။

Mobile: < 640px (Default styles)
Tablet: >= 768px
Laptop: >= 1024px
Desktop: >= 1280px

/* Mobile (Default) */
.card { width: 100%; }

/* Tablet */
@media (min-width: 768px) {
  .card { width: 50%; }
}

/* Desktop */
@media (min-width: 1024px) {
  .card { width: 33.33%; }
}

Advanced Media Queries

1. Logical Operators (and)

အခြေအနေ နှစ်ခုလုံး ပြည့်မှ အလုပ်လုပ်စေချင်ရင် and ကို သုံးပါတယ်။

/* Width က 600px နဲ့ 900px ကြားဖြစ်မှ */
@media (min-width: 600px) and (max-width: 900px) {
  body { background: yellow; }
}

2. Orientation (အလျားလိုက်/ဒေါင်လိုက်)

ဖုန်းကို လှဲကြည့်တာ (Landscape) လား၊ ထောင်ကြည့်တာ (Portrait) လား ခွဲခြားနိုင်ပါတယ်။

@media (orientation: landscape) {
  /* ဖုန်းလှဲကြည့်ရင် Video ကို အပြည့်ပြမယ် */
  .video-player { height: 100vh; }
}