Responsive Design ဆိုသည်မှာအဘယ်နည်း။ (Explainer ဗီဒီယိုနှင့်သတင်းအချက်အလက်)
ဆယ်နှစ်ကြာပြီ တုံ့ပြန်မှုကို web ဒီဇိုင်း (RWD၎) ခေတ်ရေစီးကြောင်းအတိုင်း သွားမယ်။ ကင်မရွန်အဒမ်ကိုပထမဆုံးမိတ်ဆက်ခဲ့သည် 2010 ခုနှစ် အယူအဆ။ အိုင်ဒီယာသည် ဉာဏ်ကောင်းသည် - ၎င်းကြည့်ရှုနေသည့် စက်ပစ္စည်း၏ ရှုထောင့်နှင့် လိုက်လျောညီထွေဖြစ်အောင် ဆိုက်များကို အဘယ်ကြောင့် ဒီဇိုင်းဆွဲ၍ မရသနည်း။
Responsive Design ဆိုသည်မှာအဘယ်နည်း။
တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းသည် ဝဘ်ဆိုက်တစ်ခုသည် မျက်နှာပြင်အရွယ်အစား သို့မဟုတ် ကြည်လင်ပြတ်သားမှု မည်သို့ပင်ရှိစေကာမူ မည်သည့်စက်ပစ္စည်းတွင်မဆို အကောင်းဆုံးကြည့်ရှုခြင်းအတွေ့အကြုံကို ပံ့ပိုးပေးကြောင်း သေချာစေသည့် ဒီဇိုင်းချဉ်းကပ်မှုတစ်ခုဖြစ်သည်။ ၎င်းတွင် ကြည့်ရှုနေသည့် မျက်နှာပြင်အရွယ်အစားနှင့် လိုက်လျောညီထွေဖြစ်စေမည့် ဝဘ်ဆိုက်တစ်ခုကို ဖန်တီးရန်အတွက် ပြောင်းလွယ်ပြင်လွယ်ရှိသော အပြင်အဆင်များ၊ ဇယားကွက်အခြေခံသည့် အပြင်အဆင်များနှင့် မီဒီယာမေးမြန်းချက်များကို အသုံးပြုခြင်းတို့ ပါဝင်ပါသည်။ ဆိုလိုသည်မှာ တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းဖြင့် ဒီဇိုင်းထုတ်ထားသော ဝဘ်ဆိုက်တစ်ခုသည် ဒက်စတော့ကွန်ပျူတာ၊ တက်ဘလက် သို့မဟုတ် စမတ်ဖုန်းတစ်ခုတွင် ကောင်းစွာကြည့်ရှုနိုင်ပြီး လုပ်ဆောင်နိုင်မည်ဖြစ်သည်။
တစ်နည်းဆိုရသော် ရုပ်ပုံများကဲ့သို့ အစိတ်အပိုင်းများအပြင် ထိုဒြပ်စင်များ၏ အပြင်အဆင်ကိုလည်း ချိန်ညှိနိုင်သည်။ ဤသည်မှာ တုံ့ပြန်မှုရှိသော ဒီဇိုင်းနှင့် သင့်ကုမ္ပဏီသည် ၎င်းကို အဘယ်ကြောင့် အကောင်အထည်ဖော်သင့်သည်ကို ရှင်းပြသည့် ဗီဒီယိုတစ်ခုဖြစ်သည်။ အကယ်၍ သင်သည် ဝဘ်ဆိုက်ဒီဇိုင်းအသစ် သို့မဟုတ် ဝဘ်အက်ပလီကေးရှင်းကို တီထွင်နေပါက၊ ဝဘ်သွားလာမှုအားလုံး၏ ထက်ဝက်ကျော်သည် မြင်ကွင်းပို့အနံနှင့် အမြင့်အမျိုးမျိုးရှိသော မိုဘိုင်းလ်စက်ပစ္စည်းများမှ လာသောကြောင့် တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းသည် ရွေးစရာမဟုတ်ပါ၊ ရွေးချယ်စရာတစ်ခုမဟုတ်ပေ။
တုံ့ပြန်မှုဒီဇိုင်းသည် စက်ပစ္စည်း သို့မဟုတ် မြင်ကွင်းပို့အပေါ်အခြေခံသည့် သီးခြားလွတ်လပ်သောအတွေ့အကြုံများကို တည်ဆောက်ရန်မလိုအပ်သော ဝဘ်ဒီဇိုင်နာများအတွက်လည်း သင့်လျော်ပါသည်။ တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းကို အသုံးပြု၍ ပြီးမြောက်နိုင်သည်။ CSS ကို.
Responsive Design CSS Viewport Queries
ဤသည်မှာ မီဒီယာမေးမြန်းချက်ကို အသုံးပြု၍ ကြည့်ရှုမှုပို့တ်ကို အခြေခံ၍ ဖောင့်အရွယ်အစားကို ချိန်ညှိနေသည့် ပုံစံစာရွက်၏ ဥပမာတစ်ခုဖြစ်သည်။
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
ဘရောင်ဇာများသည် ၎င်းတို့၏ အရွယ်အစားကို ကိုယ်တိုင်သိရှိကြပြီး စတိုင်စာရွက်ကို အပေါ်မှအောက်ခြေအထိ တင်ကြသည်။ မျက်နှာပြင်အရွယ်အစားအတွက် သက်ဆိုင်သည့်စတိုင်များကို မေးမြန်းခြင်းဖြင့်၊ အနည်းဆုံးနှင့် အများဆုံးစက်ပစ္စည်းအကျယ်တစ်ခုစီအတွက် သီးခြားစတိုင်ဒြပ်စင်များကို သင်သတ်မှတ်နိုင်ပါသည်။ အရွယ်အစားတိုင်းအတွက် မတူညီသောဆိုဒ်များကို ဒီဇိုင်းရေးဆွဲရန် မဆိုလိုပါ၊ သင်သည် မီဒီယာမေးမြန်းချက်များကို အသုံးပြု၍ လိုအပ်သော အစိတ်အပိုင်းများကို ပြောင်းလဲရန် လိုအပ်ပါသည်။
မိုဘိုင်း - ပထမဆုံးစိတ်ဓာတ်ဖြင့်လုပ်ဆောင်ခြင်းသည်ယနေ့ခေတ်အခြေခံစံနှုန်းဖြစ်သည်။ လူကြိုက်အများဆုံးအမှတ်တံဆိပ်များသည်သူတို့၏ site သည် mobile-friendly ဖြစ်ရုံသာမကဖောက်သည်များ၏အတွေ့အကြုံနှင့် ပါတ်သက်၍ စဉ်းစားနေသည်။
Lucinda Duncalfe, Monetate စီအီးအို
ဒီကနေ infographic ပါ ပိုက်ဆံရှာခြင်း စက်များစွာအတွက် တုံ့ပြန်မှုရှိသော ဒီဇိုင်းတစ်ခု ဖန်တီးခြင်း၏ အလားအလာကောင်းများကို သရုပ်ဖော်ခြင်း-
သင့်ဆိုက်သည် တုံ့ပြန်မှုရှိပါသလား။
သင့်ဆိုဒ်သည် တုံ့ပြန်မှုရှိမရှိကြည့်ရှုရန် ရိုးရှင်းသောနည်းလမ်းတစ်ခုမှာ ဘရောက်ဆာ၏အကျယ်ကိုအခြေခံ၍ ဒြပ်စင်များရွှေ့ခြင်းရှိ၊
ပိုမိုတိကျမှုအတွက်၊ သင့်အားညွှန်ပြပါ။ Google က Chrome ကို သင့်ဆိုဒ်သို့ browser ရွေးပါ။ View> Developer> Developer Tools ကိုကြည့်ပါ မီနူးမှ ၎င်းသည် အကန့်တစ်ခု သို့မဟုတ် ဝင်းဒိုးအသစ်တွင် ကိရိယာများစွာကို တင်ပါမည်။ မိုဘိုင်းနှင့် တက်ဘလက်အိုင်ကွန်နှင့်တူသော Developer Tools မီနူးဘား၏ ဘယ်ဘက်ရှိ အိုင်ကွန်ငယ်ကို နှိပ်ပါ။ သင်သည် အချို့သော ပုံမှန်စက်ပစ္စည်းများကို ရွေးချယ်နိုင်ပြီး စာမျက်နှာကို အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက်ကြည့်ရှုလိုသည်ဖြစ်စေ ပြောင်းလဲနိုင်သည်။
မြင်ကွင်းကိုရှုခင်းမှပုံတူသို့ပြောင်းလဲရန်သို့မဟုတ်ကြိုတင်စီစဉ်ထားသည့်မည်သည့်ပမာဏ၏အရွယ်အစားကိုမဆိုရွေးချယ်ရန်ထိပ်ဆုံးရှိအညွှန်းများကိုသုံးနိုင်သည်။ သင်စာမျက်နှာကိုပြန်ဖွင့်ရန်လိုကောင်းလိုလိမ့်မည်၊ သို့သော်၎င်းသည်သင်၏တုန့်ပြန်မှုဆိုင်ရာချိန်ညှိချက်များကိုအတည်ပြုရန်နှင့်သင်၏ site သည်ကိရိယာများအားလုံးတွင်ကြည့်ကောင်းနေစေရန်ကမ္ဘာပေါ်တွင်အအေးဆုံးကိရိယာဖြစ်သည်!