Responsive Web Design ဆိုတာ website ကို desktop, tablet, phone မျိုးစုံမှာ သပ်သပ်ရပ်ရပ်ဖတ်လို့၊နှိပ်လို့၊ သုံးလို့ရအောင်လုပ်တဲ့နည်းလမ်းပါ။ Page တစ်ခု desktop မှာလှပေမယ့် phone မှာ horizontal scroll ထွက်နေတယ်ဆိုရင် user က မကြာခင် browser back ခလုတ်ကို အလုပ်ပေးပါလိမ့်မယ်။ Responsive design မှာ flexible width, readable font size, stackable layout, scrollable code block, tap-friendly button တွေကိုစဉ်းစားရပါတယ်။
css
.container {
width: min(100% - 32px, 1100px);
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}You should see
Container က desktop မှာ max width ရှိပြီး mobile မှာ screen ထဲဝင်အောင်ကျုံ့ပါမယ်။ Image တွေက container ထက်မကျော်တော့ပါ။Tip
Mobile-first စဉ်းစားပါ။ အရင် mobile layout ကိုသပ်သပ်ရပ်ရပ်လုပ်ပြီးမှ desktop မှာပိုချဲ့တာက များသောအားဖြင့်ပိုလွယ်ပါတယ်။