တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်း - မီဒီယာမေးခွန်းများ
Media Query ဆိုတာဘာလဲ။
Media query သည် CSS3 တွင်မိတ်ဆက်ထားသော CSS နည်းပညာတစ်ခုဖြစ်သည်။
@mediaအချို့သောအခြေအနေမှန်မှသာ CSS ဂုဏ်သတ္တိများပိတ်ဆို့ခြင်းတွင်ပါဝင်ရန် စည်းမျဉ်းကို အသုံးပြုသည် ။
ဥပမာ
ဘရောင်ဇာဝင်းဒိုးသည် 600px သို့မဟုတ် သေးငယ်ပါက၊ နောက်ခံအရောင်သည် အပြာဖျော့ဖျော့ဖြစ်လိမ့်မည်-
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Breakpoint တစ်ခုထည့်ပါ။
ဤသင်ခန်းစာတွင် အစောပိုင်းတွင် ကျွန်ုပ်တို့သည် အတန်းများနှင့် ကော်လံများပါသည့် ဝဘ်စာမျက်နှာကို ပြုလုပ်ခဲ့ပြီး ၎င်းသည် တုံ့ပြန်မှုရှိသော်လည်း သေးငယ်သောစခရင်တွင် အဆင်မပြေပါ။
မီဒီယာတွေရဲ့ မေးမြန်းချက်တွေက ကူညီပေးနိုင်ပါတယ်။ ဒီဇိုင်း၏ အချို့သော အစိတ်အပိုင်းများသည် breakpoint ၏ ဘေးတစ်ဖက်စီတွင် ကွဲပြားစွာ ပြုမူရမည့် breakpoint တစ်ခုကို ထည့်နိုင်သည်။
ဒက်ဒီ
ဖုန်း
768px တွင် breakpoint တစ်ခုထည့်ရန် မီဒီယာမေးမြန်းချက်ကို အသုံးပြုပါ။
ဥပမာ
မျက်နှာပြင် (ဘရောက်ဆာဝင်းဒိုး) သည် 768px ထက်သေးငယ်သောအခါ၊ ကော်လံတစ်ခုစီသည် 100% အကျယ်ရှိသင့်သည်-
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
မိုဘိုင်းလ်အတွက် အမြဲတမ်း ဒီဇိုင်းဆွဲပါ။
Mobile First ဆိုသည်မှာ desktop သို့မဟုတ် အခြားစက်ပစ္စည်းများအတွက် မဒီဇိုင်းထုတ်မီ မိုဘိုင်းအတွက် ဒီဇိုင်းထုတ်ခြင်း (၎င်းသည် သေးငယ်သော စက်များတွင် စာမျက်နှာကို ပိုမိုမြန်ဆန်စွာ ပြသနိုင်စေမည်)။
ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ CSS တွင် အပြောင်းအလဲအချို့ ပြုလုပ်ရမည်ဖြစ်သည်။
အကျယ်သည် 768px ထက် သေးငယ်သော အခါ ပုံစံများကို ပြောင်းလဲမည့်အစား၊ အကျယ်သည် 768px ထက် ပိုကြီး လာသောအခါ ဒီဇိုင်းကို ပြောင်းလဲသင့်သည် ။ ၎င်းသည် ကျွန်ုပ်တို့၏ မိုဘိုင်းလ် ဒီဇိုင်းကို ပထမဆုံး ဖြစ်စေလိမ့်မည်-
ဥပမာ
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
နောက်ထပ် Breakpoint တစ်ခု
ကြိုက်သလောက် breakpoints အများအပြားထည့်နိုင်သည်။
တက်ဘလက်များနှင့် မိုဘိုင်းလ်ဖုန်းများကြားတွင် breakpoint တစ်ခုကိုလည်း ထည့်သွင်းပါမည်။
ဒက်ဒီ
တက်ဘလက်
ဖုန်း
နောက်ထပ် မီဒီယာမေးခွန်းတစ်ခု (600px တွင်) နှင့် 600px ထက်ကြီးသော စက်များအတွက် အတန်းအသစ်အစုံ (သို့သော်လည်း 768px ထက်ငယ်သည်) ဖြင့် ၎င်းကို ကျွန်ုပ်တို့လုပ်ဆောင်သည်။
ဥပမာ
အတန်းနှစ်ခုသည် တူညီလုနီးပါးတူညီကြောင်း သတိပြုပါ၊ တစ်ခုတည်းသော ခြားနားချက်မှာ အမည် ( col-နှင့် col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
ကျွန်ုပ်တို့တွင် ထပ်တူကျသော အတန်းနှစ်စုံရှိသည်ကို ထူးဆန်းပုံရသည်၊ သို့သော် ၎င်းသည် ကျွန်ုပ်တို့အား HTML တွင် အခွင့်အလမ်းပေးသည် ၊ breakpoint တစ်ခုစီတွင် ကော်လံများနှင့် ဘာဖြစ်မည်ကို ဆုံးဖြတ်ရန် အခွင့်အရေးပေးသည်-
HTML ဥပမာ
ဒက်စ်တော့အတွက်-
ပထမပိုင်းနှင့် တတိယအပိုင်း နှစ်ခုစလုံးသည် တစ်ခုစီတွင် ကော်လံ ၃ ခုစီ တိုးသွားမည်ဖြစ်သည်။ အလယ်အပိုင်းသည် ကော်လံ ၆ တိုင်ရှိသည်။
တက်ဘလက်များအတွက်-
ပထမအပိုင်းသည် ကော်လံ 3 ခု၊ ဒုတိယအပိုင်းသည် 9 နှင့် တတိယအပိုင်းကို ပထမအပိုင်းနှစ်ပိုင်းအောက်တွင် ပြသမည်ဖြစ်ပြီး၊ ၎င်းသည် ကော်လံ 12 ခုကို ဖြန့်ကြက်မည်ဖြစ်သည်။
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
ပုံမှန် စက်ပစ္စည်း ဖြတ်ပိုင်းများ
ကွဲပြားခြားနားသော အမြင့်နှင့် အကျယ်များရှိသည့် ဖန်သားပြင်များနှင့် စက်များစွာရှိသောကြောင့် စက်တစ်ခုစီအတွက် တိကျသော breakpoint တစ်ခုကို ဖန်တီးရန် ခက်ခဲသည်။ ရိုးရှင်းစေရန်အတွက် အဖွဲ့ငါးဖွဲ့ကို ပစ်မှတ်ထားနိုင်သည်-
ဥပမာ
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
ဦးတည်ချက်- ပုံတူ / အခင်းအကျင်း
ဘရောက်ဆာ၏ ဦးတည်ချက်ပေါ်မူတည်၍ စာမျက်နှာတစ်ခု၏ အပြင်အဆင်ကို ပြောင်းလဲရန် မီဒီယာမေးမြန်းချက်များကိုလည်း အသုံးပြုနိုင်သည်။
"Landscape" orientation ဟုခေါ်သော ဘရောက်ဆာဝင်းဒိုးသည် ၎င်း၏အမြင့်ထက် ပိုကျယ်သည့်အခါတွင်သာ အသုံးချမည့် CSS ဂုဏ်သတ္တိများ အစုံရှိနိုင်သည်-
ဥပမာ
လမ်းကြောင်းသည် အခင်းအကျင်းမုဒ်တွင် ရှိနေပါက ဝဘ်စာမျက်နှာတွင် အပြာဖျော့ဖျော့နောက်ခံ ရှိလိမ့်မည်-
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
မီဒီယာမေးခွန်းများဖြင့် အစိတ်အပိုင်းများကို ဝှက်ထားပါ။
မီဒီယာမေးမြန်းမှု၏နောက်ထပ်အသုံးများသည်မှာ မတူညီသောစခရင်အရွယ်အစားရှိဒြပ်စင်များကိုဝှက်ထားရန်ဖြစ်သည်-
ဥပမာ
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Media Queries ဖြင့် ဖောင့်အရွယ်အစားကို ပြောင်းလဲပါ။
မတူညီသောစခရင်အရွယ်အစားရှိ ဒြပ်စင်တစ်ခု၏ ဖောင့်အရွယ်အစားကို ပြောင်းလဲရန် မီဒီယာမေးမြန်းချက်များကိုလည်း သင်အသုံးပြုနိုင်သည်-
ပြောင်းလဲနိုင်သော ဖောင့်အရွယ်အစား။
ဥပမာ
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media အကိုးအကား
မီဒီယာအမျိုးအစားများနှင့် အင်္ဂါရပ်များ/အသုံးအနှုန်းများအားလုံးကို ခြုံငုံသုံးသပ်ရန်အတွက်၊ ကျွန်ုပ်တို့၏ CSS ရည်ညွှန်းချက်ရှိ @media စည်းမျဉ်းကို ကြည့်ရှုပါ ။