သင်မည်သို့ CSS ကို media query ရေးထားသလား?

မိ-width နဲ့ max-width ကိုမီဒီယာမေးမြန်းချက်နှစ်ဦးစလုံးအတှကျ syntax

တုံ့ပြန်မှုက web design ကို သူတို့အားစာမျက်နှာများသည် dynamically သူတို့ရဲ့ layout ကိုနှင့်ပုံပန်းသဏ္ဌာန်ကိုပြောင်းလဲနိုင်ပါတယ်ဘယ်မှာကွန်ရက်စာမျက်နှာတွေတည်ဆောက်ခြင်းဖို့ချဉ်းကပ်မှုဖြစ်ပါတယ် တဲ့ဧည့်သည်၏မျက်နှာပြင်အရွယ်အစားပေါ်တွင်အခြေခံ ။ သေးငယ် devices များ, မိုဘိုင်းဖုန်းများကဲ့သို့ကြောင်းသေးငယ်မျက်နှာပြင်များအတွက်သင့်လျော်သောသောထုံးစံ၌ချပ်တူညီတဲ့က်ဘ်ဆိုဒ်ကိုလက်ခံရရှိနိုင်ပါတယ်စဉ်အကြီးစားဖန်သားပြင်သူတို့အားပိုကြီးတဲ့ display ကိုမှသင့်လျော်တဲ့အဆင်အပြင်ကိုလက်ခံရရှိနိုင်ပါတယ်။ ဤသည်ချဉ်းကပ်အားလုံးအသုံးပြုသူများအတွက်ပိုကောင်းတဲ့အသုံးပြုသူအတွေ့အကြုံကိုပေးစွမ်းသည်နှင့်ပင်ကိုကူညီနိုငျ search engine ကိုအဆင့်တိုးတက်စေ ။ တုံ့ပြန်မှုကို web ဒီဇိုင်း၏အရေးပါသောအစိတ်အပိုင်းတစ်ခု CSS ကို media query ဖြစ်ပါတယ်။

မျက်နှာပြင်အရွယ်အစားအခြို့သောတံခါးခုံအထက်သို့မဟုတ်အောက်တွင်ဖော်ပြထားသောအခါများကဲ့သို့ - media query သင်သည်လူတယောက်အခွအေနေနဲ့တွေ့ဆုံခဲ့တာဖြစ်ပါတယ်တစ်ချိန်ကသာယူထိခိုက်စေလိမ့်မည်ဟုအချို့သော CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေသတ်မှတ်ထားဖို့ခွင့်ပြုသင့်ရဲ့ website မှာဖွင့် CSS ကိုဖိုင်အထဲမှာနည်းနည်းခြွင်းချက်ထုတ်ပြန်ချက်များကဲ့သို့ဖြစ်ကြ၏။

လှုပ်ရှားမှုအတွက် media query

ဒါကြောင့်သင်မည်သို့ website တစ်ခုအပေါ် media query ကိုအသုံးသလဲ? ဤတွင်အလွန်ရိုးရှင်းတဲ့ဥပမာဖြစ်ပါသည်:

1. သင်သည်မည်သည့်အမြင်အာရုံစတိုင်များအခမဲ့ရေတွင်းတစ်တွင်း-စနစ်တကျ HTML ကိုစာရွက်စာတမ်းနှင့်အတူစတင်ပါလိမ့်မယ် (ထို CSS ကိုအဘို့ဖြစ်၏ကားအဘယ်သို့)
2. သငျသညျပုံမှန်အားဖြင့်စာမကျြနှာ styling နှင့် website ကိုကြည့်ရှုမည်ကိုမည်သို့များအတွက်အခြေခံ setting များကလုပ်ပေးအဖြစ်သင့် CSS ကိုဖိုင်ထဲမှာ, သင်စတင်ရန်လိမ့်မယ်။ သငျသညျစာမျက်နှာ၏စာလုံးအရွယ်အစား 16 pixels ကိုဖြစ်လိုခဲ့, သင်သည်ဤ CSS ကိုရေးသားနိုငျခဲ့ဆိုရမည်: ခန္ဓာကိုယ် {font-size: 16px; }
3. အခုတော့သင်ကအဲဒီလိုလုပ်ဖို့လုံလောက်သောအိမ်ခြံမြေရှိသည်ပိုကြီးတဲ့ screen များအတွက်ကြောင်းစာလုံးအရွယ်အစားတိုးမြှင့်ဖို့လိုပေမည်။ ။ @media မျက်နှာပြင်နှင့် (မိ-width ကို: 1000px) {} media query အတွက်ကန်ရှိရာဤသူကားအသင်ကဤကဲ့သို့သောမီဒီယာ Query စတင်လိမ့်မည်ဟု
4. ဒါကမီဒီယာ Query ၏ syntax ဖြစ်ပါတယ်။ ဒါဟာမီဒီယာ Query သူ့ဟာသူတည်ထောင်ရန် @media နှင့်အတူစတင်သည်။ Next ကိုသင်ဤကိစ္စတွင် "screen ကို" သော "မီဒီယာအမျိုးအစား" ထားကြ၏။ ဒါကနောက်ဆုံးအသငျသညျမှာ "မီဒီယာအင်္ဂါရပ်" နဲ့မီဒီယာ Query ကိုအဆုံးသတ်စတာတွေ desktop ကွန်ပျူတာဖန်သားပြင်, တက်ဘလက်, ဖုန်း, သက်ဆိုင်သည်။ ": 1000px Mid-width ကို" အထကျွန်တော်တို့ရဲ့ဥပမာမှာဖြစ်ပါတယ်။ ဒါဟာမီဒီယာ Query အကျယ် 1000 pixels ကိုတစ်နိမ့်ဆုံး width ကိုအတူ display တွေအတွက်ကန်မည်ဟုဆိုလိုသည်။

1. မီဒီယာ Query ဤဒြပ်စင်ပြီးနောက်, သငျသညျတခုဖွင့်လှစ်ထည့်သင်သည်မည်သည့်သာမန် CSS ကိုအုပ်စိုးမှုကိုပြုကြလိမ့်မည်အရာကိုအလားတူ curly သတ္တုအထိမ်းအချုပ်ပိတ်။
2. တစ်ဦးမီဒီယာ Query မှနောက်ဆုံးခြေလှမ်းငျသညျဤအခွအေနေနဲ့တွေ့ဆုံခဲ့တာဖြစ်ပါတယ်တစ်ချိန်ကလျှောက်ထားချင်သော CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကိုထည့်သွင်းဖို့ဖြစ်ပါတယ်။ @media မျက်နှာပြင်နှင့် (မိ-width ကို: 1000px) {ခန္ဓာကိုယ် {font-size: သင်ကဤကဲ့သို့ပင်မီဒီယာ Query ကိုတက်စေသော curly ဆီကိုဦးအကြားကဤ CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကို add 20px; }
3. မီဒီယာ Query များ၏အခြေအနေများ (ထို browser ကိုပြတင်းပေါက်ကျယ်ပြန့်သည်အနည်းဆုံး 1000 pixels ကိုဖြစ်ပါတယ်) နဲ့တွေ့ဆုံခဲ့ကြသောအခါ, ဒီ CSS ကိုစတိုင်ကျနော်တို့ 20 pixels ကိုကျွန်တော်တို့ရဲ့တန်ဖိုးအသစ်မှမူလကစတင်တည်ထောင်ခဲ့ပြီး 16 pixels ကိုကနေကျွန်တော်တို့ရဲ့ site ရဲ့စာလုံးအရွယ်အစားပြောင်းလဲနေတဲ့အကျိုးသက်ရောက်မှုယူပါလိမ့်မယ်။

နောက်ထပ် Styles ထည့်သွင်းခြင်း

သင့်ရဲ့ website မှာရဲ့အမြင်အာရုံအသွင်အပြင်ကိုထိန်းညှိဖို့လိုအပ်သကဲ့သို့သင်တို့ကိုဤမီဒီယာ Query အတွင်းအဖြစ်အများအပြား CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကိုနေရာချနိုင်ဘူး။ သငျသညျ 20 pixels ကိုမှ font-size ကိုတိုးမြှင့်, ဒါပေမယ့်လည်း (# 000000) အနက်ရောင်အားလုံးကိုအပိုဒ်၏အရောင်ကိုပြောင်းလဲမသာချင်တယ်ဆိုရင်ဥပမာ,, သင်သည်ဤ add နိုင်:

@media မျက်နှာပြင်နှင့် (မိ-width: 1000px) {ခန္ဓာကိုယ် {font-size: 20px; } p {color: # 000000; }}

နောက်ထပ် media query တစ်ခုကိုထည့်ပေါင်းခြင်း

ထို့အပြင်, သင်သည်ဤကဲ့သို့သင်၏စတိုင်စာရွက်မှသူတို့ကိုထည့်သွင်းသည်ပိုမိုကြီးမားအရွယ်အစားပိုမို media query ကိုထည့်သွင်းနိုင်သည်

@media မျက်နှာပြင်နှင့် (မိ-width: 1000px) {ခန္ဓာကိုယ် {font-size: 20px; } p {color: # 000000; {} @media မျက်နှာပြင်နှင့် (မိ-width: 1400px) {ခန္ဓာကိုယ် {font-size: 24px; }}

ပထမဦးဆုံး media query 20 pixels ကိုရန်စာလုံးအရွယ်အစားကိုပြောင်းလဲ, ကျယ်ပြန့် 1000 pixels ကိုမှာကန်လိမ့်မယ်။ browser ကို 1400 pixels ကိုအထက်ခဲ့တခါထိုအခါသည်, စာလုံးအရွယ်အစားကို 24 pixels ကိုတဖန်ပြောင်းလဲသွားလိမ့်မယ်။ သင့်ရဲ့အထူးသက်ဘ်ဆိုက်အဘို့လိုအပ်သကဲ့သို့သငျအဖြစ်အများအပြား media query add နိုင်ပါတယ်။

Min-အကျယ်နှင့်မက်စ်-အကျယ်

"မိ-width ကို" ကို အသုံးပြု. သို့မဟုတ် "max-width ကို" နဲ့ - media query ရေးသားဖို့နည်းလမ်းနှစ်ခုယေဘုယျအားဖြင့်ရှိပါတယ်။ ဒီတော့ဝေး, ငါတို့အရေးယူမှာ "မိ-width ကို" ငါမြင်ပြီ။ ဒါဟာ media query တစ်ချိန်က browser ကိုအနည်းဆုံးကြောင်းနိမ့်ဆုံး width ကိုရောက်ရှိနေပြီဖြစ်ပါတယ်အကျိုးသက်ရောက်မှုယူကိုဖြစ်ပေါ်စေသည်။ ဒါကြောင့်တစ်ဦးကိုအသုံးပြုစုံစမ်းမှု: Browser အနည်းဆုံး 1000 pixels ကိုကျယ်ပြန့်သည့်အခါ "မိ-width ကို 1000px" လျှောက်ထားပါလိမ့်မယ်။ သင်တစ်ဦး "မိုဘိုင်း-ပထမဦးဆုံး" ထုံးစံ၌ site တစ်ခုတည်ဆောက်ခြင်းအခါမီဒီယာ Query ဒီစတိုင်ကိုအသုံးပြုသည်။

သင် "max-width ကို" တွေကိုအသုံးပြုပါကဆန့်ကျင်ဘက်ထုံးစံ၌အလုပ်လုပ်ပါတယ်။ တစ်ဦးက၏မီဒီယာ Query: Browser ကဒီအရွယ်အစားကိုအောက်တွင်ကျဆင်းသွားတစ်ချိန်က "max-width ကို 1000px" apply လိမ့်မယ်။

အသက်ကြီးဘရောက်စာများနှင့်စပ်လျဉ်း

media query နှင့်အတူတစ်ခုမှာစိန်ခေါ်မှုက Internet Explorer ပေါ်အဟောင်းတွေဗားရှင်းအတွက်ထောက်ခံမှုသူတို့ရဲ့မရှိခြင်းဖြစ်ပါသည်။ ကျေးဇူးတင်စရာ, မရရှိနိုင် polyfills ရှိပါတယ် နေဆဲကြောင်း site ၏ display ကိုအဟောင်းတွေကို browser software ကိုအတွက်ကျိုးမရှာသေချာစဉ်ဒီနေ့သင်ကွန်ရက်စာမျက်နှာတွေပေါ်မှာသူတို့ကိုသုံးစွဲဖို့ခွင့်ပြုထိုအဟောင်းများ browser များအတွက် media query များအတွက်ထောက်ခံမှု patch နိုင်ပါသည်။

1/24/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်