CSS Units

1. Absolute Units (အတိအကျ)

px (Pixels): သူကတော့ မျက်နှာပြင်ပေါ်က Pixel အစက်အရေအတွက်ကို ကိုယ်စားပြုပါတယ်။ အပြောင်းအလဲ မရှိဘဲ ပုံသေ အတိအကျ လိုချင်တဲ့ နေရာတွေ (ဥပမာ - Border ရဲ့ အထူ) မျိုးတွေမှာပဲ သုံးလေ့ရှိပါတယ်။

2. Relative Units (နှိုင်းယှဉ်) - Recommended

rem (Root EM): သူကတော့ Root (အဓိက html tag) မှာ ပေးထားတဲ့ Font Size (ပုံမှန်အားဖြင့် Browser တွေမှာ 16px ရှိပါတယ်) နဲ့ သွားမြှောက်ပြီး တွက်ချက်တာပါ။
- 1rem = 16px
- 2rem = 32px
- အားသာချက်: User အနေနဲ့ သူ့ရဲ့ Browser Setting မှာ စာလုံးအရွယ်အစားကို အကြီးကြီး ပြောင်းထားခဲ့မယ်ဆိုရင်၊ rem နဲ့ ပေးထားတဲ့ ကောင်တွေကပါ အလိုအလျောက် လိုက်ကြီးပေးမှာ ဖြစ်လို့ Accessibility (အသုံးပြုရ လွယ်ကူမှု) အတွက် အရမ်းကောင်းပါတယ်။ ဒါကြောင့် Font size, Padding နဲ့ Margin တွေ ပေးတဲ့အခါ rem ကိုပဲ သုံးဖို့ အထူး အကြံပြုပါတယ် ခင်ဗျာ။
em: သူကတော့ သူ့ကို အုပ်ထားတဲ့ မိဘ (Parent) Element ရဲ့ Font Size ကို အခြေခံပြီး မြှောက်တာပါ။ Parent တွေ အဆင့်ဆင့် များလာရင် တွက်ရတာ နည်းနည်း ရှုပ်ထွေးသွားနိုင်လို့ သူ့ထက်စာရင် rem ကို ပိုပြီး အားပေးပါတယ်။
% (Percent): ဒါကတော့ မိမိကို အုပ်ထားတဲ့ မိဘ (Parent) ရဲ့ အကျယ်အဝန်းကို ရာခိုင်နှုန်းနဲ့ ယူသုံးတာပါ။
- width: 50% ဆိုရင် မိဘအကျယ်ရဲ့ တစ်ဝက် ဖြစ်သွားမယ်။

3. Viewport Units (မျက်နှာပြင် အကျယ်အဝန်း)

vw (Viewport Width): လက်ရှိ ကြည့်နေတဲ့ Browser မျက်နှာပြင် အကျယ် (Width) ရဲ့ ၁ ရာခိုင်နှုန်းကို ဆိုလိုတာပါ။
- 100vw ဆိုရင် မျက်နှာပြင် အကျယ် အပြည့် ယူလိုက်တာပါ။
vh (Viewport Height): လက်ရှိ ကြည့်နေတဲ့ Browser မျက်နှာပြင် အမြင့် (Height) ရဲ့ ၁ ရာခိုင်နှုန်းပါ။
- 100vh ဆိုရင် မျက်နှာပြင် အမြင့် အပြည့် ယူလိုက်တာ ဖြစ်ပါတယ်။ (Website တွေရဲ့ ပထမဆုံး မြင်ရတဲ့ Hero Section တွေမှာ တော်တော်လေး အသုံးများပါတယ်)