<!-- HTML <head> ထဲ ဒါ မပါရင် mobile မှာ zoom out ဖြစ်မယ် --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width → screen width နဲ့ ညှိ initial-scale=1.0 → zoom factor 100%
/* Mobile First approach ✅ (recommended) */
/* base styles → mobile */
.container { grid-template-columns: 1fr; }
/* tablet and up */
@media (min-width: 768px) {
.container { grid-template-columns: repeat(2, 1fr); }
}
/* desktop and up */
@media (min-width: 1024px) {
.container { grid-template-columns: repeat(3, 1fr); }
}
/* ---- */
/* Desktop First approach */
.container { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { /* max-width သုံး */
.container { grid-template-columns: 1fr; }
}
Common Breakpoints:
px → absolute, fixed pixels % → relative to parent em → relative to element's font-size rem → relative to root font-size ✅ vw → 1% of viewport width (1vw = 1%) vh → 1% of viewport height vmin → smaller of vw/vh vmax → larger of vw/vh
| Unit | Relative to | Use case |
|---|---|---|
px | Screen pixels (fixed) | Border, icons, fine details |
% | Parent element | Fluid widths, images |
rem | Root html font-size | Font sizes, spacing ✅ |
em | Current font-size | Padding relative to text |
vw | Viewport width | Full-width sections |
vh | Viewport height | Full-height hero sections |
img {
max-width: 100%; /* ✅ image က parent ကျော်မသွားဘဲ responsive */
height: auto; /* aspect ratio ထိန်း */
}
/* Object-fit */
img { object-fit: cover; } /* crop to fill */
img { object-fit: contain; } /* fit inside, letterbox */
img { object-fit: fill; } /* stretch to fill */
cover (crop)
contain (letterbox)
max-width: 100%
Browser ကို resize လုပ်ကြည့် ဒါမဟုတ် Dev Tools F12 → mobile emulator သုံးပါ
Current: Desktop
← CSS 08 | Next: CSS Lesson 10 → CSS Variables