21 days challenge course by Kevin Powell
HTML က သူ့အတိုင်းကို responsive ဖြစ်နေပြီးသား (ကြည့်မကောင်းတာက လွဲရင်)၊ သူ့အတိုင်း responsive မဖြစ်တော့ဘူးဆိုတာ ရေးလိုက်တဲ့ css က တစ်ခုခု လုပ်လိုက်လို့။ px သုံးပြီး fixed width or height ပေးလိုက်ရင် text တွေ overflow ဖြစ်နိုင်တယ်။
em --> em သုံးထားတဲ့ element ရဲ့ parent element မှာရှိတဲ့ font-size ကို ဆက်စပ်တွက်ချက်တယ်။
problem em
က parent ရဲ့ font-size
ကိုကြည့်ပီးတွက်တာမို့ parent ရဲ့ parent မှာလည်း font-size
ပေးထားခဲ့တယ်ဆိုရင် အဲ့တာကိုပါ ထည့်ပေါင်းတွက်။
ex
<div font-size="1rem">
/*default 16px * 1 = 16px*/
<div font-size="2rem">
parent 16px * 2 = 32px */
<div font-size="2rem">/* parent 32px * 2 = 64px */ something</div>
</div>
</div>
rem: root em --> html (or ::root) ထဲက font-size နဲ့ ဆက်စပ်တွက်ချက်တယ်။
font-size အတွက် rem ကိုသုံးပါ။
For padding
and margin
, em က font-size
အတွက် parent element ကို ကြည့်တယ်ဆိုပေမယ့် padding
, margin
စတဲ့ တခြားဟာတွေဆိုရင်ကျတော့ အဲ့ဒီ element ကိုယ်တိုင်ရဲ့ font-size
ကို ကြည့်ပြီး ဆက်စပ်တွက်ချက်တယ်။
font-size
ပြောင်းလဲတဲ့ အပေါ်မူတည်ပြီး padding အချိုးအစားကို အတူတူ လိုက်ပြောင်းစေချင်တဲ့ အခါမျိုးဆိုရင် (for example for a button အကြီး၊ အလတ်၊ အသေး) rem
ကို font-size
အတွက် သုံးပြီး em
or rem
ကို padding
အတွက်အဆင်ပြေသလိုသုံးပါ။
button or elements တွေကြားမှာ consistent spacing ကိုလိုချင်ရင် margin
ကို rem
သုံးသင့်။
ပိုကြီးတဲ့ screen တွေမှာ design ကိုပိုကောင်းစေချင်ရင် ရိုးရိုး width
ကို %
နဲ့ သတ်မှတ််ပေးထားတာကိုမှ bigger screen ကြရင် max-width
သုံးပြီး ပိုမကြီးလာအောင် တခြားလိုချင်တာ တစ်ခုခု ကို ကြည့်ကောင်းအောင်ထိန်းချုပ်ထားလို့ရတယ်
media query မှာ
max-width
ဆိုရင်
@media only screen and (max-width: 600px) {
/*some css */
}
600px
ထက်**သေး**သွားပြီဆိုရင် media query ထဲက css က effect ထဖြစ်မယ်
@media only screen and (min-width: 600px) {
/*some css*/
}
600px
ထက်**ကြီး** သွားပြီဆိုရင် media query ထဲက css က effect ထဖြစ်မယ်
so meida query ထဲမှာ min-width
, max-width
သုံးတာကိုတော့ ဒီလိုမှတ်
max
--> သူ့ထက်ငယ်မှ effect ဝင်
min
--> သူ့ထက်ကြီးမှ effect ဝင် (good for mobile first)