Cross-browser ကိုအဆင်အပြင်, ရှာဖွေရေးအင်ဂျင် "ဆွဲဆောင်"

အဆိုပါ created site ကိုက၎င်း၏ထိရောက်မှုကို၏စည်းကမ်းချက်များ၌အရေးကြီးသောအခါ cross-browser ကို layout ကိုဖြစ်ပါတယ်။ ဒါဟာဘာလဲ? ဘယ်လိုအမှုကိုပြုရနိုင်သနည်း အဘယ်အရာကိုထောငျခြောရှိပါသလဲ

Cross-browser ကိုအဆင်အပြင်ကဘာလဲ?

html / css - site တစ်ခုဖန်တီးအခြေခံဖြစ်ပါတယ်။ အတော်များများကကွန်ရက်ထိန်းသိမ်းသူများနိယာမအရသိရသည်ဒီများအတွက်သင့်လျော်နေသောခေါင်းစဉ်: ငါအကောင်းခံစားမိ - နှင့်လုံလောက်စွာပါပဲ။ အဘယ်သို့စိတ်ပျက်စရာသင်သည်သင်၏ဝဘ်ဘရောက်ဆာသို့မဟုတ်မိုဘိုင်းကိရိယာမှလာသည့်အခါဖြစ်ပြီး, ဆိုက်စနစ်တကျမပြထားဘူး။ ထိုကဲ့သို့သောကိစ္စရပ်များတွင်အကူအညီသပ္ပါယ်ဒီဇိုင်းနှင့် layout ကို Cross-browser ကိုလာပါတယ်။

, ဤကိစ္စတွင်အားလုံးကိုအကောင်အထည်ဖော်ရာကနေတဆင့်ကျောရိုး, css နှင့်တက်က HTML ။ အချို့ကိစ္စများတွင်, ဒီရည်ရွယ်ချက်အတွက် JavaScript ကိုပါဝင်ပတ်သက်နိုင်ပါသည်။ ဒါပေမယ့်အဆုံးစွန်ရည်မှန်းချက်အတူတူပင်ဖြစ်ပါသည် - အရာအားလုံးကွဲပြားခြားနားသောဗားရှင်းပေါ်တွင်အလုပ်လုပ်သောသေချာအောင်ရန်။ သငျသညျထို site ကောင်းစွာ browser အားလုံးထဲမှာဖော်ပြပါတယ်နိုင်အောင်, Cross-browser ကိုလိုက်ဖက်မှုသေချာစေရန်ချင်တယ်ဆိုရင်ထို့ကြောင့်, က site ပေါ်တွင်အလုပ်၏ပထမဦးဆုံးအခိုက်အနေဖြင့်, ခပ်သိမ်းသောအချိန်ကိုစဉ်းစားရန်လိုအပ်ပေသည်။

ယေဘုယျအားဖြင့်ဗျူဟာလမ်းညွှန်

ဒီတော့ရဲ့ Cross-browser ကို layout ကိုအောင်ဘယ်လိုကြည့်ရှုကြကုန်အံ့။ အစပိုင်းမှာ site ကိုအလုပ်လုပ်တံ့သောအစီအစဉ်များကိုဆုံးဖြတ်ရန်သင့်ပါတယ်။ ဒါကြောင့်တစ်ဦးမယုံကြည်နိုင်လောက်အောင်ရှုပ်ထွေးဖြစ်ပါသည် - နှစ်ရာမှအနီးကပ်ကို web browser များ၏အရေအတွက်ကဒါလူတိုင်းနှစ်သက်သောရန်ကြိုးစားသောသတိပြုပါ။ ထိုကွောငျ့, သငျသညျထိုကဲ့သို့သော Yandex Metrika နှင့်အမျှန်ဆောင်မှုကိုအသုံးပြုနိုင်ခြင်းနှင့်ထောကျပံ့နိုငျသောအရာကိုအာရုံစိုက်ရန်, ဆုံးဖြတ်နိုင်ရန်အတွက် 3 မှ 8. ဖို့အရေအတွက်ကရှေးခယျြ Google Analytics သည်။ အဲဒီနောကျသငျသညျထိုပြဿနာကို Cross-browser ကိုအောင်မြင်ရန်ဖြေရှင်းနိုင်ပါလိမ့်မည်ကိုမည်သို့ရှာဖွေသင့်ပါတယ်။

လူအတော်များများ khaki အပေါ်သူတို့ရဲ့ဘဏ်လုပ်ငန်းလုပ်ပါ။ တစ်ခုသာအချို့သော browser ကိုနားလည်သောဤအထူး codes တွေကို, selector တွေကိုနှင့်စည်းမျဉ်းများ။ ဒါပေမယ့်သင်ကကွဲပြားခြားနားသော browser များနှင့် browser ကိုဗားရှင်းအဘို့အ INSERT အနည်းဆုံးအနည်းငယ်သောင်းချီရေးသားဖို့ရှိသည်ပေးထားသောများစွာသောဘာလို့လဲဆိုတော့သူ့ရဲ့မြင့်မားတဲ့ကုန်ကျစရိတ်, ကြာချိန်နှင့်အဓိပ်ပါယျမရှိသော၏ထိုကဲ့သို့သောတစ်ခုချဉ်းကပ်လှဲ။ , တချို့ကတူညီသောလမ်းကိုပြသလျက်ရှိသောသူတို့အားပစ္စည်း၏အသုံးပြုမှုကိုအပေါ်အားကိုး။ ဒါပေမဲ့တစ်ချိန်တည်းမှာမကြာခဏကြောင့်အရေးကြီးသောအားသာချက်များစွာဆုံးရှုံးခဲ့ရသည်။ ပိုပြီးအပြိုင်နှင့်သပ္ပါယ်ဒီဇိုင်းကို အသုံးပြု. ဆုံးရှုံးမှု minimize ရန်။ ဒါဟာဘာလဲ?

တုံ့ပြန်မှုဒီဇိုင်း

ဆိုက်တစ်ဦးရော်ဘာသောဝက်ဘ်ဆိုက်၏အပြင်အဆင်အားဤချဉ်းကပ်မှု, အကြောင်း, ကွဲပြားခြားနားသောမျက်နှာပြင်အရွယ်အစားနှင့် browser လိုက်လျောညီထွေဖြစ်အောင်သောသူတို့ဖြစ်ပါတယ်။ ဒါဟာသပ္ပါယ်ဒီဇိုင်းနှင့် Cross-browser ကိုလိုက်ဖက်မှုနီးကပ်စွာရောယှက်ဖြစ်ကြောင်းသတိပြုသင့်ပါတယ်, သူတို့အကြောင်းကိုတဦးတည်းအရာစကားပြောရန်အခါ, ကများသောအားဖြင့်ဒုတိယဆိုလို။ တစ်ဦးအမြန်ဥပမာကိုကြည့်ရအောင်။

အော်ပရာနဲ့ Opera Mini ကိုများကဲ့သို့အချို့သော browser များရှိပါတယ်။ на мобильных телефонах. ပထမဦးစွာ Desktop ကွန်ပျူတာများပေါ်တွင်အသုံးပြု၎င်း, ဒုတိယ - မိုဘိုင်းဖုန်းများပေါ်မှာ။ ယေဘုယျအားဖြင့်သူတို့ကဆင်တူပေမယ့်အင်္ဂါရပ်တွေအတော်များများရှိသည်။ ထိုကဲ့သို့သောကိစ္စများတွင်ကတစ်ဦးချင်းစီဖိုင်များကိုနှင့် / သို့မဟုတ်မီဒီယာမေးမြန်းချက်များအသုံးပြုမှုကိုချိတ်ဆက်ရန်အရေးကြီးပါသည်။ ဒါဟာဘာလဲ? ပထမဦးဆုံးအမှုမှာ, သီးခြားဘရောက်ဇာကိုလုပ်ကိုင်ဖို့ရည်ရွယ်ထားတဲ့သီးခြားဖိုင်ဖန်တီး, သူတို့၏စိန်ခေါ်မှုက register လုပ်သွား။ ဒုတိယအမှု၌, သင်မီဒီယာမေးမြန်းချက်နှင့်အတူ file ရမည်ဖြစ်သည်။ သင့်ရဲ့ program ကိုအလိုရှိသောဖွဲ့စည်းမှုပုံစံအတွက်ဝန်ဖိုင်ရဲ့တိကျတဲ့လိုအပ်ချက်များကိုတွေ့ဆုံလျှင်။

ငါသည်အဘယ်သို့ပြုရပါမည်နည်း

အစပိုင်းမှာကျနော်တို့ html အတူလုပ်ကိုင်သောအခါ Cross-browser ကို layout ကိုအထူးအာရုံစူးစိုက်မှုလိုအပ်သည်သတိရသင့်တယ်။ ထိုကွောငျ့, သငျသညျ သာ. ကွီးမွတျထိရောက်မှုတို့အတွက် Cascading Style Sheet များအများဆုံးဖြစ်နိုင်ခြေအသုံးပြုသင့်ပါတယ်။ တစ်ချိန်တည်းမှာပင်လည်းအလုပ်လုပ်အချို့နည်းလမ်းများကိုပြောင်းလဲပစ်ရန်လိုအပ်ပါသည်။ ဤမျှလောက်များစွာသောအတွေ့အကြုံကလူကိုသူတို့တစ်ခုခု, အသုံးပြုမှု pixels ကို၏အရွယ်အစားထောက်ပြသောအခါ - px ။ ဆိုက်ရဲ့ထိပ်ဆငျထားတဲ့ကြီးမားတဲ့ကမ္ပည်း header ကို၏ဥပမာစဉ်းစားပါ။

သူမသည် 800rh တစ်မှုနှုန်းမှာသတ်မှတ်ထားခဲ့သည် width ။ 1600rh အတွက် screen ပေါ်မှာကအတော်လေးဆွဲဆောင်မှုရှိလိမ့်မည်။ သို့သော် 700rh ပေါ်မှာရယ်စရာကြည့်ရှုမည်။ ဤအမှု၌အဘယ်သို့ပြုသနည်း သငျသညျ pixels ကိုအတွက်အရွယ်အစားနှင့်ရာခိုင်နှုန်းကိုသတ်မှတ်မရနိုငျပါသညျ! ထိုအခါကမ္ပည်းသတ်မှတ်ထားတဲ့အရှည်ဖြစ်, နှင့်မျက်နှာပြင်၏ထက်ဝက် width ကိုမည်မဟုတ်ကိုင်ထားပါ။ ရာခိုင်နှုန်းကိုသတ်မှတ်နိုင်ပြီးအကွာအဝေးတိကျတဲ့ element ကမျက်နှာပြင်၏အနားအပေါ်ထားရှိပါလိမ့်မည်သည့်အချိန်။ ဒါပေမဲ့ဒီမှာမျက်နှာပြင်သေးငယ်လွန်းလျှင်အဘယ်သို့ပြုရမည်လား

ဒါကြောင့် 300 pixels ကိုတစ်ခုဖြစ်သည်ဆိုပါစို့? ဤကိစ္စတွင်ခုနှစ်, ကျနော်တို့မှတ်ပုံတင် width ကိုပြုပြင်တာတွေလိုမီဒီယာစုံစမ်းမှုကကူညီပါလိမ့်မယ်။ က 700rh ညီမျှနှင့်လျော့နည်းလျှင်, နိမိတ်လက္ခဏာအမတ်နေရာ 75% သိမ်းပိုက်မည်ကိုတည်ထောင်ရန်ဖြစ်နိုင်ခြေဖြစ်ပါတယ်။ width ကို 300 pixels ကိုသို့မဟုတ်ထိုထက်နည်းနဲ့ညီလျှင်, ဖော်ထုတ်နှင့် 100% မှဖြစ်နိုင်ပါတယ်။ မြေတပြင်လုံးခေါင်းစဉ်ကအရမ်းစိတ်ဝင်စားဖို့နှင့်အသုံးဝင်သည်, ဒါကြောင့်အကြီးအသေးစိတျကိုလေ့လာနိုင်ပါတယ်။ ဒါပေမယ့်ဖြစ်ချင်တော့အဲဒီမှာစာအုပ်အပေါ်သတင်းအချက်အလက်ဖြစ်ပြီး, အလုပ်လုပ်မည်မဟုတ်ပေဆောင်းပါးအတွက်အရာအားလုံးထားတော်မူ၏။

အဘယ်ကြောင့်သပ္ပါယ် Cross-browser ကို layout ကိုရှာဖွေရေးအင်ဂျင်ဆွဲဆောင်?

ထိုအဖြေမှာရိုးရိုးလေးပင်ဖြစ်သည်: က developer များဆိုက်အတိုင်းလိုက်နာနှင့်၎င်း၏အသုံးပြုသူများအတွက်တတ်နိုင်သမျှကြောင့်ပျော်စရာစေကွောငျးဖျောပွလို့ပဲ။ ဤသည်ထိုသို့သောသူတို့ကိုရှာဖွေရေးအင်ဂျင်အတွက်မြင့်မားတဲ့ရာထူးပေးခြင်းအားဖြင့်အားပေးအားမြှောက်နိုင်ဆိုလိုသည်။ ဟုတ်ပါတယ်, သင့်ရဲ့ site ကိုချက်ချင်းထိပ်-1 ရက်နေ့မှာပြသမည်မဟုတ်ပါ, ဒါပေမဲ့တခြားအချက်တွေနှင့် တွဲဖက်. , ဒီကိုအလွန်ထမြောက်ကြလိမ့်မည်။ ဒါဟာကိုယ့်အသုံးမကျလိုအပ်ချက်ပေမယ့်အရမ်းအာရုံစူးစိုက်မှုမှပေးဆောင်ဖြစ်ပါတယ်ခံထိုက်တော်မူသောအရာတစ်ခုခုမပေးကြောင်းမှတ်သားရပါမည်။

ပြီးနောက်ရှိသမျှတို့, ပဲစဉ်းစားသူသည်အဆင်းကိုအလွန်သာယာသောမဟုတ်သော site ပေါ်တွင်ရရှိသွားတဲ့အခါအသုံးပြုသူကဘာလဲ? သို့သော်ထိုသို့ရှာဖွေရေးအင်ဂျင်တစ်ခုအရည်အသွေးနိမ့်အကြောင်းအရာကမ်းလှမ်းကြောင်းယုံကြည်ဖို့မဝင်စေခြင်းငှါ, ထို့ကြောင့်သူတို့ကမ်းလှမ်းခဲ့သည်သင့်ကြောင်းဆိုဒ်များဒါဂရုတစိုက်ရွေးချယ်ထားသည်။ ကွန်ပျူတာလက်တော့, တက်ဘလက်, စမတ်ဖုန်းသို့မဟုတ်မိုဘိုင်းဖုန်း: သူတို့ကလူမဆိုဟာ့ဒ်ဝဲအနေဖြင့်လိုအပ်သောသတင်းအချက်အလက်ရယူနိုင်ပါလိမ့်မည်သည့်အကြောင်းအရာများအတွက်အရည်အသွေးမြင့် shell ကို, generate ဘာဖြစ်လို့လဲဆိုတော့ဒီအပြင်အကျိုးအတွက်ကွန်ရက်ထိန်းသိမ်းသူများလည်းရှိနေပါသည်။ ထို့ကြောင့်ပိုမိုစိတ်ကျေနပ်မှုဧည့်သည်များ, ပိုမိုလျှင်မြန်စွာကြီးထွားလာ site နှင့်ဝင်ငွေအဆင့်။

ကောက်ချက်

ဒါကြောင့်တစ်ဦးအလွန်ရှည်လျားပြီးလောကီ, လွယ်ကူသည်မဟုတ် - ဒါဟာတုံ့ပြန်မှုဒီဇိုင်းနှင့်အတူ Cross-browser ကို site ၏ဖန်တီးမှုသောကျိုးနွံတကယ်တော့မှတ်သားဖို့မမဖြစ်နိုင်ဘူး။ ဒါကြောင့်စိတ်ရှည်နှင့်စည်းကမ်းမှတ်မိဖို့လိုအပ်သောဖြစ်ပါသည် - ကတို့သည်ကြီးစွာသောအရာပဲ! ဖြစ်ကောင်းဖြစ်နိုင်တစ်ခုခုကနဦးကမှားသွားပါလိမ့်မယ်, ဒါပေမယ့်ကျနော်တို့ပြန်ဆုတ်ဖို့ကွဲပြားခြားနားသောချဉ်းကပ်သုံးပါနှင့်, မသတင်းအချက်အလက်ကိုရှာဖွေရန်ကြိုးစားရန်လိုအပ်ပါသည်။ ပြီးတော့သူ့ရဲ့ဧည့်သည်များမှပြသနိုင်ဖို့အပျော်အပါးဖြစ်လိမ့်မည်ဟု website တစ်ခုလုပ်ရဖို့သေချာပါစေ။