web browsers တွေရာခိုင်နှုန်းတန်ဖိုးများကိုသုံးပြီး display ကိုဆုံးဖြတ်ရန်လေ့လာ
အတော်များများဟာကျောင်းသားများကို တုံ့ပြန်မှုကို web design ကို အကျယ်တန်ဖိုးများများအတွက်ရာခိုင်နှုန်းသုံးပြီးခက်ခဲအချိန်ရှိသည်။ အထူးသ browser ကိုသူတို့အားရာခိုင်နှုန်းတွက်ချက်ပုံကိုအတူရှုပ်ထွေးမှုများလည်းမရှိ။ အောက်တွင်သင်ရာခိုင်နှုန်းတစ်တုံ့ပြန်မှုက်ဘ်ဆိုက်အတွက်အကျယ်တွက်ချက်မှုအဘို့အများမည်သို့အလုပ်လုပ်သည်တဲ့အသေးစိတ်ရှင်းပြချက်ကိုရှာဖွေပါလိမ့်မယ်။
အကျယ်တန်ဖိုးများများအတွက် Pixels အသုံးပြုခြင်း
သင်တစ်ဦး width ကိုတနျဖိုးအဖြစ် pixels ကိုအသုံးပြုသောအခါရလဒ်ကအရမ်းရိုးရှင်းတဲ့ဖြစ်ကြသည်။ သငျသညျကျယ်ပြန့်ပေါင်း 100 pixels ကိုတစ်ဦးစာရွက်စာတမ်း၏ header ထဲမှာ Element တစ်ခုရဲ့ရဲ့ width တန်ဖိုးကိုသတ်မှတ်ထားဖို့ CSS ကိုသုံးလျှင်, ထိုဒြပ်စင်သင်က်ဘ်ဆိုက်ရဲ့အကြောင်းအရာသို့မဟုတ်ထဲက footer ဒါမှမဟုတ်တခြားဒေသများရှိကျယ်ပြန့်ပေါင်း 100 pixels ကိုသတ်မှတ်ထားတစ်ခုကဲ့သို့တူညီသောအရွယ်အစားဖြစ်လိမ့်မည် စာမျက်နှာ။ pixels ပကတိတန်ဖိုးကိုရှိပါတယ်, ဒါကြောင့် 100 ဦး pixels ကိုသင့်ရဲ့စာရွက်စာတမ်းအတွက် Element တစ်ခုရဲ့ပုံပေါ်ဘယ်မှာနေပါစေပေါင်း 100 pixels ကိုဖြစ်ပါတယ်။ pixel တန်ဖိုးများကိုနားလည်ရန်လွယ်ကူသောနေစဉ်ကံမကောင်းစွာပဲ, သူတို့ကတုံ့ပြန်မှုဝက်ဘ်ဆိုက်များအတွက်ကောင်းစွာအလုပ်မလုပ်ပါဘူး။
Ethan Marcotte 3 key ကိုကျောင်းအုပ်င်အဖြစ်ကဒီချဉ်းကပ်နည်းကိုရှင်းပြ, ဟူသောဝေါဟာရကို "တုံ့ပြန်မှုကို web design ကို" စတင်သုံးစွဲ:
- တစ်ဦးကအရည်ဇယားကွက်
- အရည်မီဒီယာ
- မီဒီယာမေးမြန်းချက်
သူများသည်ပထမဦးဆုံးနှစ်ဦးကိုအမှတ်တစ်အရည်ဇယားကွက်များနှင့်အရည်မီဒီယာ, တန်ဖိုးများ sizing အဘို့, ရာခိုင်နှုန်း, အစား pixels ကိုအသုံးပြုခြင်းအားဖြင့်အောင်မြင်နေကြသည်။
အကျယ်တန်ဖိုးများများအတွက်ရာခိုင်နှုန်းကိုအသုံးပြုခြင်း
သငျသညျမှာ, Element တစ်ခုရဲ့တစ် width ကိုတည်ထောင်ရန်အမှန်တကယ်အရွယ်အစားကြောင့်ဒြပ်စင် display တွေရာခိုင်နှုန်းကိုအသုံးပြုသောအခါကစာရွက်စာတမ်း၌တည်ရှိ၏ဘယ်မှာပေါ် မူတည်. ကွဲပြားပါလိမ့်မယ်။ ရာခိုင်နှုန်းပြသအရွယ်အစားသင့်ရဲ့စာရွက်စာတမ်းများတွင်အခြားဒြပ်စင်မှဆွေမျိုးဖြစ်ပါတယ်ဆိုလိုတာကဆွေမျိုးတန်ဖိုးကိုဖြစ်ကြသည်။
သငျသညျရဲ့ width ကိုသတ်မှတ်မယ်ဆိုရင်ဥပမာ, ပုံတစ်ပုံကို 50% မှဤပုံရိပ်က၎င်း၏ပုံမှန်အရွယ်အစား၏ထက်ဝက်မှာပြသလိမ့်မည်ဟုမဆိုလိုပါ။ ဒါကဘုံအထငျမှားဖြစ်ပါတယ်။
ပုံတစ်ပုံကိုပြုလုပ်ရန် 600 pixels ကိုကျယ်ပြန့်သည်မှန်လျှင်, ထို့နောက် 50% မှာပြသနေတဲ့ CSS ကိုတနျဖိုးကို အသုံးပြု. က web browser ကို 300 pixels ကိုကျယ်ပြန့်ဖြစ်လိမ့်မည်ဟုမဆိုလိုပါ။ ဒါဟာရာခိုင်နှုန်းတန်ဖိုးကိုကြောင်းပုံရိပ်ပါရှိသည်သောဒြပ်စင်မဟုတ်ဘဲပုံသဏ်ဌာနျသူ့ဟာသူ၏ဇာတိအရွယ်အစားပေါ်တွင်အခြေခံတွက်ချက်ထားခြင်းဖြစ်သည်။ (ကဌာနခွဲသို့မဟုတ်အချို့သောအခြား HTML element ကိုဖြစ်နိုင်သည့်) ကကွန်တိန်နာ 1000 pixels ကိုကျယ်ပြန့်သည်မှန်လျှင်ကြောင့်တန်ဖိုးကွန်တိန်နာရဲ့ width ကို 50% ဖြစ်ပါသည်ကတည်းကထို့နောက်ပုံရိပ်ကို 500 pixels ကိုမှာပြသပါလိမ့်မယ်။ ကို element 400 pixels ကိုကျယ်ပြန့်သည်မှန်လျှင်ကြောင့်တန်ဖိုးကွန်တိန်နာ၏ 50% ဖြစ်ပါသည်ကတည်းကထို့နောက်ပုံရိပ်ကိုသာ, 200 pixels ကိုမှာပြသပါလိမ့်မယ်။ ဒီနေရာမှာမေးခွန်းတစ်ခုကိုအတွက်ပုံရိပ်ကြောင့်ပါရှိသည်သောဒြပ်စင်အပေါ်လုံးဝမူတည်သည့် 50% အရွယ်အစားရှိပါတယ်။
ကိုသတိရပါ, တုံ့ပြန်မှုဒီဇိုင်းကိုအရည်ဖြစ်ပါတယ်။ Layout များနှင့်အရွယ်အစားအဖြစ်ပြောင်းလဲသွားပါလိမ့်မယ် မျက်နှာပြင်အရွယ်အစား / device ကိုအပြောင်းအလဲများကို ။ သငျသညျရုပ်ပိုင်းဆိုင်ရာ, Non-ကို web အသုံးအနှုန်းများ၌ဤအကြောင်းကိုစဉ်းစားလျှင်, သင်တို့ကိုထုပ်ပိုးပစ္စည်းနှင့်အတူဖြည့်နေကြမယ့်ကတ်ထူပြားသေတ္တာရှိခြင်းနှင့်တူ၏။ သငျသညျ box ကိုထက်ဝက်ကြောင့်ပစ္စည်းနှင့်ပြည့်စုံမည်သငျ့ကွောငျးပွောဆိုလြှငျ, သငျသညျလိုအပျပိုးပမာဏကို box ကို၏အရွယ်အစားပေါ်တွင် မူတည်. ကွဲပြားပါလိမ့်မယ်။ တူညီတဲ့က်ဘ်ဆိုက်ဒီဇိုင်းရာခိုင်နှုန်း width များအတွက်စစ်မှန်တဲ့ရရှိထားသူဖြစ်ပါသည်။
အခြားရာခိုင်နှုန်းအပေါ်အခြေခံပြီးရာခိုင်နှုန်း
image ကို / ကွန်တိန်နာဥပမာထဲမှာ, ငါတုံ့ပြန်မှု image ကိုဖော်ပြရန်မယ်လို့ဘယ်လောက်ပြသနိုင်ဖို့ကို element များအတွက် pixel တန်ဖိုးများကိုအသုံးပြုခဲ့သည်။ ကြောင်းကွန်တိန်နာတစ်ရာခိုင်နှုန်းတစ်ရာခိုင်နှုန်းအပေါ်အခြေပြုသူတို့၏တန်ဖိုးများကိုရလိမ့်မယ်အထဲမှာအဖြစ်မှန်မှာပါဝင်တဲ့ဒြပ်စင်လည်း, တစ်ရာခိုင်နှုန်းနှင့်ပုံရိပ်သို့မဟုတ်အခြားဒြပ်စင်များဟုသတ်မှတ်ခံရလိမ့်မယ်။
ဤတွင်အလေ့အကျင့်၌ဤပြသထားတယ်အခြားသာဓကပါပဲ။
သငျသညျတစျခုလုံး site ကို "ကွန်တိန်နာ" (တစ်ဘုံကို web design ကိုအလေ့အကျင့်) ၏အဆင့်အတန်းနှင့်အတူတစ်ဌာနခွဲအတွင်းပါရှိသောသည်အဘယ်မှာရှိ website တစ်ခုရှိတယ်လို့ပြောပါ။ ကြောင်းဌာနခွဲအတွင်းပိုင်းကိုသင်နောက်ဆုံးမှာ 3 ဒေါင်လိုက်ကော်လံအဖြစ်ဖော်ပြရန် style လိမ့်မည်ဟုသုံးသည်အခြားကွဲပြားမှုရှိပါတယ်။ ဒါက HTML ကိုဤကဲ့သို့သောကြည့်ရှုစေခြင်းငှါ:
အခုတော့သငျသညျ 90% ပြောကြောင်း "ကွန်တိန်နာ" ကွဲပြားခြင်း၏အရွယ်အစားကိုသတ်မှတ်နိုင်ဖို့ CSS ကိုသုံးနိုင်ပါသည်။ ဒီဥပမာထဲမှာ, ကွန်တိန်နာဌာနခွဲကျမတို့ကလည်းဘယ်တိကျတဲ့တန်ဖိုးမသတ်မှတ်ရသေးပါသောကိုယ်ထည်ထက်တခြားဝန်းရံအခြားဒြပ်စင်မရှိပါ။ ပုံမှန်အားဖြင့်ခန္ဓာကိုယ် browser ကို window ၏ 100% အဖြစ်ဆပ်ပါလိမ့်မယ်။ ထို့ကြောင့် "ကွန်တိန်နာ" ဌာနခွဲရဲ့ရာခိုင်နှုန်းကို browser window ၏အရွယ်အစားပေါ်တွင်အခြေခံလိမ့်မည်။ အရွယ်အစားအတွက် browser ကိုပြတင်းပေါက်အပြောင်းအလဲများ, ဒါကြောင့်ဒီ "ကွန်တိန်နာ" ၏မည်အရွယ်အစားအဖြစ်။ browser ကိုပြတင်းပေါက် 2000 pixels ကိုကျယ်ပြန့်ပါလျှင်ဒါ, ဒီဌာနကို 1800 pixels ကိုမှာပြသပါလိမ့်မယ်။ ဒါဟာဘရောက်ဇာ၏အရွယ်အစားဖြစ်သော, 2000 (က x .90 = 1800 2000) ၏ 90 ရာခိုင်နှုန်း) အဖြစ်တွက်ချက်သည်။
အသီးအသီးက "ကွန်တိန်နာ" အတွင်းတွေ့ရှိရသည် "ဗိုလ်မှူးကြီး" ကွဲပြားမှု 30% ၏အရွယ်အစားကိုသတ်မှတ်နေတယ်ဆိုရင်, ထို့နောက်သူတို့ထဲကတစ်ဦးချင်းစီကဒီဥပမာထဲမှာကျယ်ပြန့် 540 pixels ကိုရလိမ့်မည်။ ဒါကကွန်တိန်နာ (x .30 = 540 1800) မှာပြန်ဆိုသော 1800 pixels ကို၏ 30% အဖြစ်တွက်ချက်သည်။ ကျွန်တော်ကွန်တိန်နာများ၏ရာခိုင်နှုန်းကိုပြောင်းလဲလိုလျှင်သူတို့ကထိုသို့ဆံ့ဒြပ်စင်အပေါ်မှီခိုနေကြစဉ်ကတည်းကဤအတွင်းကွဲပြားမှုလည်းသူတို့မှာဆပ်အရွယ်အစားပြောင်းလဲလိမ့်မယ်။
ရဲ့ browser ကိုပြတင်းပေါက်ကျယ်ပြန့် 2000 pixels နဲ့ဖြစ်နေဆဲပေမယ့်ကျနော်တို့မယ့်အစား 90% 80% အထိကွန်တိန်နာ၏ရာခိုင်နှုန်းတန်ဖိုးအားပြောင်းလဲပစ်ယူဆကြပါစို့။ ဒါကြောင့်ကျယ်ပြန့်သည်ယခုအခါ (x .80 = 1600 2000) 1600 pixels နဲ့အပြစ်ပေးမည်ဟုဆိုလိုသည်။ ငါတို့သည်ငါတို့၏ 3 "ဗိုလ်မှူးကြီး" ကွဲပြားခြင်း၏အရွယ်အစားများအတွက် CSS ကိုပြောင်းလဲစေနှင့် 30% မှာသူတို့ကိုစွန့်ခွာကြဘူးဆိုရင်တောင်သူတို့နေဖြင့်သုံးနိုင်သောအခြေအနေတွင်ဖြစ်သောမိမိတို့၏်ဒြပ်စင်, ကတည်းကယခုကွဲပြားခြားနားဆပ်မည်, ပြောင်းလဲခဲ့ပါသည်။ သူများသည် 3 သင်းဖွဲ့သည်ယခုအခါအသက် 30 1600 ၏%, ဒါမှမဟုတ်ကွန်တိန်နာ (x .30 = 480 1600) ၏အရွယ်အစားအရာ, ကျယ်ပြန့် 480 pixels ကိုတစ်ဦးချင်းစီအဖြစ်ဆပ်ပါလိမ့်မယ်။
ပင်နောက်ထပ်ဒီယူခြင်း, ပုံတစ်ပုံကိုဤ "ဗိုလ်မှူးကြီး" ကွဲပြားခြင်းနှင့်ပုံရိပ်၏တဦးတည်းအတွင်းပိုင်းရှိခဲ့လျှင်တစ်ရာခိုင်နှုန်းကို အသုံးပြု. သုံးနိုင်ခဲ့၎င်း၏အရွယ်အစားအဘို့ဆက်စပ်သည် "ဗိုလ်မှူးကြီး" သူ့ဟာသူဖြစ်လိမ့်မည်။ ထို "ဗိုလ်မှူးကြီး" ဌာနခွဲအဖြစ်အရွယ်အစားပြောင်းလဲဒါပုံရိပ်ကအတွင်းပိုင်းလိုရှိ၏။ ဒါကြောင့်ဘရောက်ဇာ၏အရွယ်အစားဒါမှမဟုတ် "ကွန်တိန်နာ" အလှည့်အတွက်အတွင်းပိုင်းပုံရဲ့အရွယ်အစားကိုပြောင်းမယ်လို့ရသောသုံး "ဗိုလ်မှူးကြီး" ကွဲပြားမှု, အကျိုးသက်ရောက်စေမယ်လို့, ပြောင်းလဲသွားတယ်လျှင် "ဗိုလ်မှူးကြီး။ " သင်ကြည့်ရှုနိုင်သကဲ့သို့, ထိုသူအပေါင်းတို့တဲ့အခါမှာချိတ်ဆက်ထား ဒါဟာရာခိုင်နှုန်း-မောင်းနှင်ဆိုက်တန်ဖိုးများထံသို့မရောက်ရ။
သင်တစ်ဦးရာခိုင်နှုန်းတန်ဖိုးကိုသူ့ရဲ့ width ကိုအသုံးပြုသည်တဲ့အခါဝဘ်စာမျက်နှာ၏အတွင်းပိုင်းက Element ဆပ်လိမ့်မယ်ဘယ်လိုထည့်သွင်းစဉ်းစားတဲ့အခါ, သင်သည်ထိုဒြပ်စင်စာမျက်နှာ၏ markup နေထိုင်ထားတဲ့အတွက်အခြေအနေတွင်နားလည်ရန်လိုအပ်သည်။
အကျဉ်းချုပ်မှာ
ရာခိုင်နှုန်းအဘို့အဆင်အပြင်ဖန်တီးခြင်းအတွက်အရေးပါသောအခန်းကဏ္ဍမှ တုံ့ပြန်မှုဝက်ဘ်ဆိုက်များ ။ သငျသညျ Response ပုံရိပ်တွေ sizing သို့မဟုတ်သူ၏အရွယ်အစားအချင်းချင်းဆွေမျိုးများမှာအမှန်တကယ်အရည်ဇယားကွက်အောင်ရာခိုင်နှုန်း width အသုံးပြုနေသည်ပဲဖြစ်ဖြစ်, ဤတွက်ချက်မှုကိုနားလည်သငျသညျအလိုရှိကြသည်တွင်အဆိုပါကြည့်အောင်မြင်မှုရရှိရန်လိုအပ်သောဖြစ်လိမ့်မည်။