က်ဘ်ဆိုက်ဒီဇိုင်းအတွက်တစ်ဦးကလေ့မေးခွန်းမေး "သင် 100% မှ Element တစ်ခုရဲ့အမြင့်သတ်မှတ်ထားကြဘူးဘယ်လို" ပါသလဲ
ဤလွယ်ကူသောအဖြေနဲ့တူပုံပေါ်ပေမည်။ သငျသညျရိုးရှင်းစွာအသုံးပြုနိုင်သည် CSS ကို 100% မှ Element တစ်ခုရဲ့အမြင့်ကိုတင်ထားရန်, ဒါပေမဲ့ဒီအစဉ်အမြဲတစ်ခုလုံးကို browser ကိုပြတင်းပေါက် fit မှဒြပ်စင်ဆန့်မထားဘူး။ ဒီဖြစ်ပျက်နဲ့သင်ဤအမြင်စတိုင်အောင်မြင်ရန်အဘယ်သို့ပြုနိုင်အဘယ်ကြောင့်ထွက်ရှာတွေ့ကြပါစို့။
pixels နဲ့ရာခိုင်နှုန်း
သင်သုံးပြီး Element တစ်ခုရဲ့အမြင့်သတ်မှတ်လိုက်တဲ့အခါ CSS ကိုအိမ်ခြံမြေ နှင့် pixels ကိုအသုံးပြုတဲ့တန်ဖိုးတစ်ခုကို element က browser မှာထိုမျှလောက်ဒေါင်လိုက်အာကာသကိုတက်ယူပါလိမ့်မယ်။
ဥပမာ, အမြင့်နှင့်အတူတစ်အပိုဒ်: 100px; သင့် browser window ကိုဘယ်လောက်ပိုကြီးတဲ့အရေးမပါဘူး, ဒီဒြပ်စင်အမြင့် 100 pixels ကိုဖွစျလိမျ့မညျကိုသင့် design.It အတွက်ဒေါင်လိုက်အာကာသ 100 pixels ကိုတက်ယူပါလိမ့်မယ်။
ရာခိုင်နှုန်းကွဲပြားခြားနား pixels ထက်အလုပ်လုပ်ကြသည်။ အဆိုပါ W3C သတ်မှတ်ချက်အရ, ရာခိုင်နှုန်းအထွဋ်ကွန်တိန်နာရဲ့အမြင့်မှလေးစားမှုနဲ့အတူတွက်ချက်နေကြသည်။ ဒါကြောင့်သင်ကအမြင့်နှင့်အတူတစ်အပိုဒ်ထားလျှင်: 50%; 100px အမြင့်နှင့်အတူတစ်ဦး div အတွင်းပိုင်း, ထိုအပိုဒ်ရဲ့မိဘဒြပ်စင်၏ 50% သောအမြင့် 50 pixels ကိုရလိမ့်မည်။
အဘယ်ကြောင့်ရာခိုင်နှုန်းမြင့်ကျရှုံးခြင်း
သင်တစ်ဦးဝက်ဘ်စာမျက်နှာဒီဇိုင်းနေနှင့်သင် window ကိုအပြည့်အဝအမြင့်တက်ယူချင်ပါတယ်တဲ့ကော်လံရှိပါကသဘာဝအကွံအမြင့်ကိုထည့်သွင်းဖို့ဖြစ်ပါသည်: 100%; ကြောင်းဒြပ်စင်ဖြစ်သည်။ ပြီးနောက်ရှိသမျှတို့, သငျသညျအကျယ်ဖို့ width ကိုသတ်မှတ်ထားမယ်ဆိုရင်: 100%; ၎င်းဒြပ်စင်စာမျက်နှာ၏အပြည့်အဝအလျားလိုက်အာကာသကိုတက်ယူပါလိမ့်မယ်, ဒါကြောင့်အမြင့်ညာဘက်, တူညီတဲ့အလုပ်မလုပ်သင့်သလဲ ကံမကောင်းစွာပဲ, ဒီမှာအားလုံးကိစ္စမဟုတ်ပါဘူး။
ဒီဖြစ်ပျက်အဘယ်ကြောင့်နားလည်စေရန်, သငျသညျ browser များအမြင့်နှင့်အကျယ်အနက်ကိုဘော်ပြဘယ်လိုနားလည်ရပေမည်။ web browsers ကို browser window ကိုဖွင့်လှစ်ခဲ့တာဖြစ်ပါတယ်ဘယ်လောက်ကျယ်ပြန့်တဲ့ function ကိုအဖြစ်စုစုပေါင်းရရှိနိုင်ပါသည် width ကိုတွက်ချက်။ သင်သည်သင်၏စာရွက်စာတမ်းများပေါ်တွင်မဆို width ကိုတန်ဖိုးများသတ်မှတ်ထားကြဘူးလျှင်, ဘရောက်ဇာကိုအလိုအလြောကျ window ၏တစ်ခုလုံးကို width ကို (100% ရဲ့ width ကို default ဖြစ်ပါတယ်) ဖြည့်ပါရန် contents တွေကိုစီးဆင်းလိမ့်မယ်။
အမြင့်တန်ဖိုးကိုကွဲပြားခြားနားအကျယ်ထက်တွက်ချက်သည်။ ဝဘ်ဒီဇိုင်နာစာမျက်နှာတခုတခုအပေါ်မှာဒြပ်စင်အဘို့ပကတိအမြင့်သတ်မှတ်လျှင်တကယ်တော့, browser များအကြောင်းအရာက viewport ပြင်ပတွင်သွားနိုင်အောင်ရှည်လျားသည်မဟုတ်လျှင် (အရှင်စာစောင်ကိုအရက်ဆိုင်လိုအပ်) မှာအားလုံးအမြင့်အကဲဖြတ်သို့မဟုတ်ပါဘူး။ ဒီလိုမှမဟုတ်ရင် browser ကိုရိုးရိုးကအဆုံးမှကြွလာသည်အထိအကြောင်းအရာ viewport ရဲ့ width အတွင်းစီးဆင်းပေးနိုင်ပါတယ်။ အမြင့်အမှန်တကယ်မှာအားလုံးတွက်ချက်ခြင်းမရှိပါ။
; အော်တို: တစ်နည်းအတွက်မိဘဒြပ်စင်တစ်ဦးက default အမြင့်ရှိသည် - ပြဿနာများသင်သတ်မှတ်ထားထွဋ်မရှိဘဲမိဘဒြပ်စင်ရှိကြောင်း Element တစ်ခုရဲ့အပေါ်တစ်ဦးရာခိုင်နှုန်းအမြင့်ထားသောအခါဖြစ်ပေါ် ။ သင်, အကျိုးသက်ရောက်မှုရှိတစ်ဦး undefined တန်ဖိုးကိုကနေအမြင့်တွက်ချက်ဖို့ browser ကိုတောငျးဆိုနေကြသည်။ တစ်တရားမဝင်သောတန်ဖိုးတူညီမယ်လို့ကတည်းကရလဒ် browser ကိုဘာမျှမပါဘူးဆိုတာပါပဲ။
သင်တစ်ဦးရာခိုင်နှုန်းမှသင်၏ဝဘ်စာမျက်နှာများပေါ်တွင်အမြင့်သတ်မှတ်ထားဖို့လိုလျှင်သင်အမြင့်သတ်မှတ်ချင်တဦးတည်းအမှုအမျိုးမျိုးရှိသမျှမိဘဒြပ်စင်၏အမြင့်တင်ထားရန်ရှိသည်။ တနည်းအားဖြင့်သင်သည်ဤကဲ့သို့သောစာမျက်နှာရှိပါက:
ဒီနေရာမှာအကြောင်းအရာ
သငျသညျဖွယ်ရှိ div ကြောင့်ထဲမှာအပိုဒ်တစ်ဦးကို 100% အမြင့်ရှိသည်ဖို့ချင်ပေမယ့်နှစ်ခုမိဘဒြပ်စင်ရှိပါတယ်အမှန်တကယ်ကိုရွေးလိုက်ပါ:
နှင့်။ ဆွေမျိုးအမြင့်ဖို့ div ၏အမြင့်သတ်မှတ်နိုင်ဖို့အတွက်သင်ကဲ့သို့ကောင်းစွာခန္ဓာကိုယ်နှင့် html element တွေကို၏အမြင့်သတ်မှတ်ထားရမည်ဖြစ်သည်။
ဒါကြောင့်သင် div, ဒါပေမယ့်လည်းခန္ဓာကိုယ်နှင့် html element တွေကိုသာအမြင့်သတ်မှတ်ထားဖို့ CSS ကိုသုံးစွဲဖို့မလိုအပ်လိမ့်မယ်။ သငျသညျမွနျမွနျသာဒီလိုချင်သောအကျိုးသက်ရောက်မှုအောင်မြင်ရန်, 100% အမြင့်ဟုသတ်မှတ်ခံရအရာအားလုံးနှင့်အတူလွှမ်းမိုးရနိုင်ကတည်းကဒီစိန်ခေါ်မှုတစ်ရပ်ဖြစ်နိုင်ပါတယ်။
100% မြင့်နှင့်အလုပ်လုပ်သည့်အခါအချို့ကအရာမှတ်ချက်ဖို့
ယခုတွင်သင်သည် 100% မှသင့်စာမျက်နှာဒြပ်စင်၏အမြင့်တင်ထားရန်မည်သို့မည်ပုံပြုလုပ် ထွက်. လူအပေါင်းတို့ကိုသင့်စာမကျြနှာကိုလုပ်ဖို့စိတ်လှုပ်ရှားဖွယ်ရှိနိုင်ပါသည်သိသော်လည်းသင်သတိပြုမိဖြစ်သင့်အနည်းငယ်သောအရာတို့ကိုရှိပါတယ်:
- မာဂျင်နှင့် padding ကိုသင်တဦးတည်းချင်ကြပါဘူးတဲ့စာစောင်ကို bar ကို add နိုင်ပါတယ်။ ငါရာခိုင်နှုန်းအထွဋ် (နှင့် width) နှင့်အတူအလုပ်လုပ်နှင့်အတူတွေ့ရှိရင့်ဆုံးသောနှောင့်အယှက်အမှုအရာများထဲမှတစ်ခုမှာထိုတူညီသောဒြပ်စင်ပေါ်တွင် padding နဲ့မာဂျင်စာစောင်ကိုအရက်ဆိုင်မလိုဘဲပင်အားလုံးအကြောင်းအရာပြသမှုသော်လည်း, စာမကျြနှာမှစာစောင်ကိုအရက်ဆိုင် add နိုငျသောကွောငျ့ဖွစျသညျ။ ၎င်းဒြပ်စင်၏အမြင့်သို့မဟုတ် width ကိုတွက်ချက်ကြောင်းပထမဦးဆုံးအရာတစ်ခုဖြစ်သည်ထားလို့ဖြစ်ပါတယ်။ ထိုအခါမာဂျင်နှင့် padding တွေကအပေါ်ဆက်ပြောသည်နေကြသည်။ သင်တစ်ဦးကို 100% အမြင့်နှင့်အတူဒြပ်စင်များနှင့်ထိပ်ပိုင်းနှင့် 10 pixels ကိုတစ်ဦးချင်းစီ၏အောက်ခြေတွင်မာဂျင်ရှိပါကဒါကြောင့်အပို 20 pixels ကိုတစ်ဦးသည်စာလိပ်ဘားရှိရလိမ့်မည်။ ကိုသတိရပါသည် CSS ကိုသေတ္တာမော်ဒယ် Element တစ်ခုရဲ့အရွယ်အစားပေါ်သို့အနားသတ်, နယ်စပ်နှင့် padding ကိုဖြည့်စွက်, ဒါသူတို့အကအခြားသေတ္တာမော်ဒယ်တန်ဖိုးများကိုမဆို 100% အမှန်တကယ်ထက်ပိုမို 100% ဖြစ်လိမ့်မည်။
- သင့်ရဲ့အကြောင်းအရာသတ်မှတ်အမြင့်ထက်ပိုတက်ယူနေလျှင်, အဲဒါကိုပြီးနောက်ဘာမှ overwrite ပါလိမ့်မယ်။ တနည်းအားဖြင့်သင်တို့ကိုအမြင့် 80% သောကော်လံနဲ့ဒီဇိုင်းရှိပါက, ထိုသို့၏အတွင်းပိုင်းသောအကြောင်းအရာအပို 20% ကော်လံကိုအောက်တွင်ဆက်လက်နှင့်အမြင်အာရုံဒီဇိုင်းကိုချိုးမည်အကြောင်း, အမြင့် 100% အထိကြာမြင့်မည် သင့်စာမျက်နှာ၏။ ကြောင်းကော်လံအောက်တွင်ဖော်ပြထားသောအကြောင်းအရာလည်းမရှိလြှငျ, စာသားရိုးရှင်းစွာပြုလုပ်၏ထိပ်ကိုကျော်ရေးလိုက်ပါလိမ့်မယ်။ ကျွန်မမကြာခဏဝဘ်ဒီဇိုင်နာတစ်ဦးစာမျက်နှာ၏အမြင့်ကိုအတင်းဖို့ကြိုးစားပါတယ်သည့်အခါဤအဖြစ်ပျက်ကိုကြည့်ပါကပစ်လွှတ်မှုအတွက်ဿုံအလုပ်လုပ်ရရှိပေမယ့်အနာဂတ်အတွက်စာမျက်နှာအပြောင်းအလဲများ, သူတို့ရဲ့အကြွင်းမဲ့အာဏာမြင့်ရာအရပ်ပေါ်မှာအကြောင်းအရာလုံးဝစာမျက်နှာ၏စီးဆင်းမှုကိုချိုးဖျက်အခါ။ သငျသညျအဘယ်သူ၏ width နဲ့ height ဟာ viewport ၏အရွယ်အစားနှင့်အတူပြောင်းလဲပစ်ရမယ်တုံ့ပြန်မှုက်ဘ်ဆိုက်များကိုတည်ဆောက်ကြသောအခါဤသည်နှစ်ထပ်ကွမ်းမှန်သည်။
ဒီကို fix စေရန်, သငျသညျအဖြစ်ကောင်းစွာဒြပ်စင်၏အမြင့်သတ်မှတ်နိုင်သည်။ သငျသညျအော်တိုကသတ်မှတ်ထားတယ်ဆိုရင်သူတို့လိုအပ်လျှင်, စာစောင်ကိုဘားပေါ်လာပါလိမ့်မယ်ဒါပေမယ့်သူတို့မရကြသောအခါပျောက်ကွယ်သွား။ ဒါကအမြင်အာရုံချိုးဖြေရှင်းနိုင်ပေမယ့်သူတို့ကိုသင်ချင်မပြုစေခြင်းငှါအဘယ်အရပ် scale လုပ်ပြီးထပ်ပြောသည်။
viewport ယူနစ်အသုံးပြုခြင်း
သင်ဤစိန်ခေါ်မှုကိုကိုင်တွယ်နိုင်ပါတယ်အခြားသောလမ်း CSS ကို viewport ယူနစ်နှင့်အတူစမ်းသပ်ဖို့ဖြစ်ပါတယ်။ တိုင်းတာခြင်း၏ viewport အမြင့်ယူနစ်ကိုအသုံးပြုခြင်းအားဖြင့်, သင်သည်အရွယ်အစား element တွေကို viewport တစ်သတ်မှတ်အမြင့်တက်ယူနိုင်ပြီး, သော viewport အပြောင်းအလဲများအဖြစ်ပြောင်းလဲသွားပါလိမ့်မယ်! ဒါကစာမျက်နှာပေါ်တွင်သင်၏ 100% အမြင့်ပုံရိပ်ယောင်ရပေမယ့်နေဆဲသူတို့ကိုကွဲပြားခြားနားသောထုတ်ကုန်များနှင့်မျက်နှာပြင်အရွယ်အစားအဘို့အပြောင်းလွယ်ပြင်လွယ်ဖြစ်ရှိသည်ဖို့အကောင်းဆုံးနည်းလမ်းဖြစ်ပါတယ်။