CSS ယူနစ်များ
CSS ယူနစ်များ
CSS တွင် အရှည်ဖော်ပြရန် မတူညီသော ယူနစ်များစွာ ရှိသည်။
width
CSS ဂုဏ်သတ္တိများစွာသည် , margin
, , padding
, အစ
ရှိသည့် "အရှည်" တန်ဖိုးများကို ယူသည် font-size
။
Length10px
သည် ,
2em
, စသည်တို့ ကဲ့သို့ အလျားယူနစ်ဖြင့် လိုက်သော နံပါတ်တစ်ခုဖြစ်သည် ။
ဥပမာ
px (pixels) ကို အသုံးပြု၍ မတူညီသော အလျားတန်ဖိုးများကို သတ်မှတ်ပါ-
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
မှတ်ချက်- နံပါတ်နှင့် ယူနစ်ကြားတွင် နေရာလွတ်တစ်ခု မပေါ်နိုင်ပါ။ သို့သော် တန်ဖိုးဖြစ်လျှင်
0
ယူနစ်ကို ချန်လှပ်နိုင်သည်။
အချို့သော CSS ဂုဏ်သတ္တိများအတွက်၊ အနှုတ်အရှည်များကို ခွင့်ပြုထားသည်။
အလျားယူနစ် နှစ်မျိုးရှိသည်- အကြွင်းမဲ့ နှင့် နှိုင်းယှဥ် ။
အကြွင်းမဲ့အရှည်များ
အကြွင်းမဲ့ အရှည်ယူနစ်များကို ပုံသေသတ်မှတ်ထားပြီး ၎င်းတို့အနက်မှတစ်ခုဖော်ပြသော အလျားသည် ထိုအရွယ်အစားအတိုင်း ပေါ်လာမည်ဖြစ်သည်။
မျက်နှာပြင်အရွယ်အစားများ အလွန်ကွာခြားသောကြောင့် မျက်နှာပြင်ပေါ်တွင် အသုံးပြုရန် လုံးဝအလျားယူနစ်များကို မအကြံပြုပါ။ သို့ရာတွင်၊ ပရင့်အပြင်အဆင်ကဲ့သို့သော အထွက်ကြားခံအား သိရှိပါက ၎င်းတို့ကို အသုံးပြုနိုင်သည်။
Unit | Description |
---|---|
cm | centimeters |
mm | millimeters |
in | inches (1in = 96px = 2.54cm) |
px * | pixels (1px = 1/96th of 1in) |
pt | points (1pt = 1/72 of 1in) |
pc | picas (1pc = 12 pt) |
* Pixels (px) သည် ကြည့်ရှုသည့်ကိရိယာနှင့် ဆက်စပ်နေသည်။ dpi နိမ့်သောစက်ပစ္စည်းများအတွက် 1px သည် မျက်နှာပြင်ပြသမှု၏ device pixel (dot) တစ်ခုဖြစ်သည်။ ပရင်တာများနှင့် ကြည်လင်ပြတ်သားမှုမြင့်မားသော ဖန်သားပြင်များအတွက် 1px သည် စက်ပစ္စည်းပစ်ဆယ်များစွာကို ရည်ညွှန်းသည်။
နှိုင်းရအရှည်များ
နှိုင်းရအလျားယူနစ်များသည် အခြားအလျားအလျားနှင့် ဆက်စပ်သော အလျားကို သတ်မှတ်ပေးသည်။ နှိုင်းရအလျားယူနစ်များသည် မတူညီသော rendering ကြားခံများကြားတွင် ပိုကောင်းသည်။
Unit | Description | |
---|---|---|
em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
ex | Relative to the x-height of the current font (rarely used) | |
ch | Relative to width of the "0" (zero) | |
rem | Relative to font-size of the root element | |
vw | Relative to 1% of the width of the viewport* | |
vh | Relative to 1% of the height of the viewport* | |
vmin | Relative to 1% of viewport's* smaller dimension | |
vmax | Relative to 1% of viewport's* larger dimension | |
% | Relative to the parent element |
အကြံပြုချက်- em နှင့် rem ယူနစ်များသည် ပြီးပြည့်စုံသော အရွယ်တင်နိုင်သော အပြင်အဆင်ကို ဖန်တီးရာတွင် လက်တွေ့ကျပါသည်။
* Viewport = ဘရောင်ဇာဝင်းဒိုးအရွယ်အစား။ viewport က 50cm ကျယ်ရင် 1vw = 0.5cm ပါ။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် အရှည်ယူနစ်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Length Unit | |||||
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |