လုပ်နည်း - Responsive Text
CSS ဖြင့် တုံ့ပြန်မှုရှိသော စာစီစာရိုက်ဖန်တီးနည်းကို လေ့လာပါ။
မင်္ဂလာပါကမ္ဘာလောက
ဖောင့်အရွယ်အစား အတိုင်းအတာကို ကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
တုံ့ပြန်မှုရှိသော ဖောင့်အရွယ်အစား
စာသားအရွယ်အစားကို ယူနစ်တစ်ခုဖြင့် သတ်မှတ်နိုင်သည် vw
၊ ဆိုလိုသည်မှာ "viewport width" ကို ဆိုလိုသည်။
ထိုနည်းအားဖြင့် စာသားအရွယ်အစားသည် ဘရောက်ဆာဝင်းဒိုး၏ အရွယ်အစားအတိုင်း လိုက်ပါလိမ့်မည်-
ဥပမာ
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport သည် browser window အရွယ်အစားဖြစ်သည်။ 1vw = viewport အကျယ်၏ 1%။ viewport က 50cm ကျယ်ရင် 1vw က 0.5cm ဖြစ်ပါတယ်။
Media Queries ဖြင့် ဖောင့်အရွယ်အစားကို ပြောင်းလဲပါ။
သတ်မှတ်ထားသော မျက်နှာပြင်အရွယ်အစားရှိ ဒြပ်စင်တစ်ခု၏ ဖောင့်အရွယ်အစားကို ပြောင်းလဲရန် မီဒီယာမေးမြန်းချက်များကိုလည်း သင်အသုံးပြုနိုင်ပါသည်-
ပြောင်းလဲနိုင်သော ဖောင့်အရွယ်အစား။
ဥပမာ
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
အကြံပြုချက်- ဖောင့်များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Font Tutorial သို့ သွားပါ ။
မီဒီယာမေးခွန်းများအကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Media Queries Tutorial ကို ဖတ်ရှုပါ ။