CSS မီဒီယာမေးခွန်းများ
CSS2 သည် မီဒီယာအမျိုးအစားများကို မိတ်ဆက်ပေးခဲ့သည်။
CSS2 တွင် မိတ်ဆက် ထားသော @mediaစည်းမျဉ်းသည် မတူညီသော မီဒီယာအမျိုးအစားများအတွက် မတူညီသောစတိုင်စည်းမျဉ်းများကို သတ်မှတ်နိုင်စေခဲ့သည်။
ဥပမာများ- ကွန်ပျူတာစခရင်များအတွက် စတိုင်စည်းမျဉ်းများ အစုံလိုက်၊ ပရင်တာများအတွက် တစ်ခု၊ လက်ကိုင်ကိရိယာများအတွက် တစ်ခု၊ တီဗီအမျိုးအစား စက်များအတွက် တစ်ခုနှင့် အခြားတစ်ခု ရှိနိုင်ပါသည်။
ကံမကောင်းစွာပဲ ဤမီဒီယာအမျိုးအစားများသည် ပုံနှိပ်မီဒီယာအမျိုးအစားမှလွဲ၍ စက်ပစ္စည်းများမှ ပံ့ပိုးမှုများစွာမရရှိခဲ့ပါ။
CSS3 သည် မီဒီယာမေးခွန်းများကို မိတ်ဆက်ခဲ့သည်။
CSS3 ရှိ မီဒီယာမေးမြန်းချက်များသည် CSS2 မီဒီယာ အမျိုးအစားများ စိတ်ကူးကို ချဲ့ထွင်ခဲ့သည်- စက်ပစ္စည်းအမျိုးအစားကို ရှာဖွေမည့်အစား ၎င်းတို့သည် စက်ပစ္စည်း၏ စွမ်းဆောင်ရည်ကို ကြည့်ရှုကြသည်။
မီဒီယာမေးမြန်းချက်များကို အသုံးပြုနိုင်ပြီး၊ ကဲ့သို့သော အရာများစွာကို စစ်ဆေးရန်၊
- viewport ၏ အကျယ်နှင့် အမြင့်
- စက်၏ အကျယ်နှင့် အမြင့်
- လမ်းညွှန်ချက် (တက်ဘလက်/ဖုန်းသည် အလျားလိုက် သို့မဟုတ် ပုံတူမုဒ်တွင် ရှိပါသလား။)
- ပြတ်သားမှု
မီဒီယာမေးမြန်းချက်များကို အသုံးပြုခြင်းသည် ဒက်စတော့များ၊ လက်ပ်တော့များ၊ တက်ဘလက်များနှင့် မိုဘိုင်းလ်ဖုန်းများ (iPhone နှင့် Android ဖုန်းများကဲ့သို့) အံဝင်ခွင်ကျပုံစံစာရွက်တစ်ခုကို ပေးပို့ရန်အတွက် ရေပန်းစားသောနည်းလမ်းတစ်ခုဖြစ်သည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် @mediaစည်းမျဉ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Media Query Syntax
မီဒီယာမေးမြန်းချက်တစ်ခုတွင် မီဒီယာအမျိုးအစားတစ်ခုပါဝင်ပြီး မှန်သည်ဖြစ်စေ မှားသည်ဖြစ်စေ ဖြေရှင်းနိုင်သည့် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသောအသုံးအနှုန်းများပါရှိသည်။
@media not|only mediatype and (expressions) {
CSS-Code;
}
သတ်မှတ်ထားသော မီဒီယာအမျိုးအစားသည် စာရွက်စာတမ်းပေါ်တွင်ပြသနေသည့် စက်အမျိုးအစားနှင့် ကိုက်ညီပြီး မီဒီယာမေးမြန်းမှုတွင် ဖော်ပြချက်အားလုံးသည် မှန်ပါက မေးမြန်းမှု၏ရလဒ်သည် မှန်ပါသည်။ မီဒီယာမေးမြန်းချက်တစ်ခု မှန်သောအခါ၊ ပုံမှန် cascading စည်းမျဉ်းများအတိုင်း သက်ဆိုင်ရာ စတိုင်စာရွက် သို့မဟုတ် စတိုင်စည်းမျဉ်းများကို အသုံးပြုပါသည်။
သင်မဟုတ်သော သို့မဟုတ် တစ်ခုတည်းသော အော်ပရေတာများကို အသုံးမပြုပါက၊ မီဒီယာအမျိုးအစားသည် ရွေးချယ်နိုင်
allမည်ဖြစ်ပြီး အမျိုးအစားကို အဓိပ္ပာယ်သက်ရောက်မည်ဖြစ်သည်။
မတူညီသောမီဒီယာအတွက် မတူညီသောပုံစံစာရွက်များ ကိုလည်း သင့်တွင် ရနိုင်သည်-
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3 မီဒီယာ အမျိုးအစားများ
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Media Queries ရိုးရှင်းသော ဥပမာများ
မီဒီယာမေးမြန်းချက်များကို အသုံးပြုရန် နည်းလမ်းတစ်ခုမှာ သင့်စတိုင်စာရွက်အတွင်းတွင် CSS ကဏ္ဍတစ်ခုရှိရန်ဖြစ်သည်။
မြင်ကွင်းပို့တ်သည် 480 ပစ်ဇယ်ပိုကျယ်ပါက သို့မဟုတ် ပိုကျယ်ပါက နောက်ခံ-အရောင်အား အစိမ်းဖျော့ဖျော့သို့ပြောင်းသည် (မြင်ကွင်းပို့တ်သည် 480 ပစ်ဇယ်ထက်နည်းပါက၊ နောက်ခံအရောင်သည် ပန်းရောင်ဖြစ်လိမ့်မည်)။
ဥပမာ
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
အောက်ဖော်ပြပါ ဥပမာသည် မြင်ကွင်းပို့တ်သည် 480 ပစ်ဇယ်ပိုကျယ်ပါက စာမျက်နှာ၏ဘယ်ဘက်တွင် ပေါ်မည့်မီနူးကိုပြသသည် (မြင်ကွင်းပို့တ်သည် 480 ပစ်ဇယ်ထက်နည်းပါက၊ မီနူးသည် အကြောင်းအရာ၏ထိပ်တွင်ရှိပါမည်)။
ဥပမာ
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
နောက်ထပ် Media Query ဥပမာများ
မီဒီယာမေးမြန်းချက်များအတွက် နောက်ထပ်ဥပမာများစွာအတွက်၊ နောက်စာမျက်နှာသို့ သွားပါ- CSS MQ ဥပမာများ ။
CSS @media အကိုးအကား
မီဒီယာအမျိုးအစားများနှင့် အင်္ဂါရပ်များ/အသုံးအနှုန်းများအားလုံးကို ခြုံငုံသုံးသပ်ရန်အတွက်၊ ကျွန်ုပ်တို့၏ CSS ရည်ညွှန်းချက်ရှိ @media စည်းမျဉ်းကို ကြည့်ရှုပါ ။