CSS စာလုံးအရွယ်အစား
ဖောင့်အရွယ်အစား
ပိုင်ဆိုင်မှု သည် font-size
စာသားအရွယ်အစားကို သတ်မှတ်ပေးသည်။
ဝဘ်ဒီဇိုင်းတွင် စာသားအရွယ်အစားကို စီမံခန့်ခွဲနိုင်ခြင်းသည် အရေးကြီးပါသည်။ သို့ရာတွင်၊ စာပိုဒ်များကို ခေါင်းစီးများနှင့်တူစေရန် သို့မဟုတ် ခေါင်းစီးများသည် စာပိုဒ်များနှင့်တူစေရန် ဖောင့်အရွယ်အစား ချိန်ညှိမှုများကို အသုံးမပြုသင့်ပါ။
ခေါင်းစီးများနှင့် စာပိုဒ်များအတွက် <h1> - <h6> ကဲ့သို့သော သင့်လျော်သော HTML တက်ဂ်များကို အမြဲသုံးပါ။
ဖောင့်အရွယ်အစားတန်ဖိုးသည် အကြွင်းမဲ့ သို့မဟုတ် ဆွေမျိုးအရွယ်အစား ဖြစ်နိုင်သည်။
ပကတိအရွယ်အစား-
- စာသားကို သတ်မှတ်ထားသော အရွယ်အစားအဖြစ် သတ်မှတ်သည်။
- ဘရောက်ဆာအားလုံးတွင် စာသားအရွယ်အစားကို ပြောင်းလဲရန် အသုံးပြုသူတစ်ဦးအား ခွင့်မပြုပါ (ဝင်ရောက်နိုင်မှုဆိုင်ရာ အကြောင်းပြချက်များအတွက် မကောင်းပါ)
- အထွက်၏ ရုပ်ပိုင်းဆိုင်ရာအရွယ်အစားကို သိသောအခါတွင် အကြွင်းမဲ့အရွယ်အစားသည် အသုံးဝင်သည်။
ဆွေမျိုးအရွယ်အစား-
- ပတ်ဝန်းကျင်ရှိ အစိတ်အပိုင်းများနှင့် ဆက်စပ်သော အရွယ်အစားကို သတ်မှတ်သည်။
- အသုံးပြုသူတစ်ဦးအား ဘရောက်ဆာများတွင် စာသားအရွယ်အစားကို ပြောင်းလဲခွင့်ပြုသည်။
မှတ်ချက်- ဖောင့်အရွယ်အစားကို သင်မသတ်မှတ်ပါက၊ စာပိုဒ်များကဲ့သို့ ပုံမှန်စာသားအတွက် ပုံသေအရွယ်အစားမှာ 16px (16px=1em) ဖြစ်သည်။
စာလုံးအရွယ်အစားကို Pixels ဖြင့် သတ်မှတ်ပါ။
pixels ဖြင့် စာသားအရွယ်အစားကို သတ်မှတ်ခြင်းသည် သင့်အား စာသားအရွယ်အစားအပေါ် အပြည့်အဝ ထိန်းချုပ်နိုင်စေသည်-
ဥပမာ
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
အကြံပြုချက်- အကယ်၍ သင်သည် pixels ကိုအသုံးပြုပါက၊ စာမျက်နှာတစ်ခုလုံးကို အရွယ်အစားပြောင်းရန် zoom tool ကို သင်အသုံးပြုနိုင်ပါသေးသည်။
Em ဖြင့် ဖောင့်အရွယ်အစားကို သတ်မှတ်ပါ။
အသုံးပြုသူများသည် စာသားကို အရွယ်အစားပြောင်းရန် (ဘရောက်ဆာမီနူးတွင်)၊ developer အများအပြားသည် pixels အစား em ကို အသုံးပြုကြသည်။
1em သည် လက်ရှိဖောင့်အရွယ်အစားနှင့် ညီမျှသည်။ ဘရောက်ဆာများတွင် မူရင်းစာသားအရွယ်အစားမှာ 16px ဖြစ်သည်။ ထို့ကြောင့် 1em ၏ မူရင်းအရွယ်အစားမှာ 16px ဖြစ်သည်။
ဤဖော်မြူလာကို အသုံးပြု၍ အရွယ်အစားကို pixels မှ em သို့ တွက်ချက်နိုင်သည်- pixels /16= em
ဥပမာ
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
အထက်ဖော်ပြပါ ဥပမာတွင်၊ em ရှိ စာသားအရွယ်အစားသည် pixels ရှိ ယခင်ဥပမာနှင့် တူညီပါသည်။ သို့သော်၊ em အရွယ်အစားဖြင့်၊ ဘရောက်ဆာအားလုံးတွင် စာသားအရွယ်အစားကို ချိန်ညှိနိုင်သည်။
ကံမကောင်းစွာဖြင့်၊ Internet Explorer ဗားရှင်းအဟောင်းများတွင် ပြဿနာရှိနေဆဲဖြစ်သည်။ ပိုကြီးအောင်ပြုလုပ်သောအခါတွင် စာသားသည် သင့်ထက် ပိုကြီးလာပြီး သေးငယ်သွားသောအခါတွင် စာသားသည် သင့်ထက်သေးငယ်လာသည်။
ရာခိုင်နှုန်းနှင့် Em ပေါင်းစပ်မှုကို အသုံးပြုပါ။
ဘရောက်ဆာအားလုံးတွင်အလုပ်လုပ်သောဖြေရှင်းချက်မှာ <body> ဒြပ်စင်အတွက် ပုံသေဖောင့်အရွယ်အစားကို ရာခိုင်နှုန်းသတ်မှတ်ရန်ဖြစ်သည်-
ဥပမာ
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
ကျွန်ုပ်တို့၏ကုဒ်သည် ယခုအခါ ကောင်းမွန်စွာ အလုပ်လုပ်ပါသည်။ ၎င်းသည် ဘရောက်ဆာအားလုံးတွင် တူညီသောစာသားအရွယ်အစားကိုပြသပြီး ဘရောက်ဆာအားလုံးကို ဇူးမ်ချဲ့ရန် သို့မဟုတ် စာသားကို အရွယ်အစားပြောင်းရန် ခွင့်ပြုသည်။
တုံ့ပြန်မှုရှိသော ဖောင့်အရွယ်အစား
စာသားအရွယ်အစားကို ယူနစ်တစ်ခုဖြင့် သတ်မှတ်နိုင်သည် vw
၊ ဆိုလိုသည်မှာ "viewport width" ကို ဆိုလိုသည်။
ထိုနည်းအားဖြင့် စာသားအရွယ်အစားသည် ဘရောက်ဆာဝင်းဒိုး၏ အရွယ်အစားအတိုင်း လိုက်ပါလိမ့်မည်-
မင်္ဂလာပါကမ္ဘာလောက
ဖောင့်အရွယ်အစား အတိုင်းအတာကို ကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
ဥပမာ
<h1 style="font-size:10vw">Hello World</h1>
Viewport သည် browser window အရွယ်အစားဖြစ်သည်။ 1vw = viewport အကျယ်၏ 1%။ viewport က 50cm ကျယ်ရင် 1vw က 0.5cm ဖြစ်ပါတယ်။