/CRL

Conquering Responsive Layouts by Kevin Powell

Primary LanguageHTML

Conquering-responsive-layouts

21 days challenge course by Kevin Powell

Notes day 1 - percentages ကိုသုံးပါ ၊ height ထည့်တာကို တတ်နိုင်သလောက်ရှောင်

HTML က သူ့အတိုင်းကို responsive ဖြစ်နေပြီးသား (ကြည့်မကောင်းတာက လွဲရင်)၊ သူ့အတိုင်း responsive မဖြစ်တော့ဘူးဆိုတာ ရေးလိုက်တဲ့ css က တစ်ခုခု လုပ်လိုက်လို့။ px သုံးပြီး fixed width or height ပေးလိုက်ရင် text တွေ overflow ဖြစ်နိုင်တယ်။

Notes day 2

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 သုံးသင့်။

Notes day 3 - max-width ထပ်ပေါင်းထည့်ခြင်း

ပိုကြီးတဲ့ 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)