پوه کړئ چې څنګه د ویب براؤزرونو د فیصده ارزښتونو په کارولو سره یو نمونه ټاکي
د ځواب ورکوونکو ویب ډیزاین ډیری زده کونکي د چوکیو ارزښتونو لپاره د فیصدو کارولو ستونزمن وخت لري. په ځانګړې توګه، داسې ناڅاپي شتون شتون لري چې څنګه براؤزر دغه فیصده حسابوي. لاندې د تفصيلي وضاحت په لټه کې شئ چې په ځواب ورکوونکي ويب پاڼه کې د چوکونو د محاسبې لپاره څومره کار کوي.
د چوکۍ ارزښتونو لپاره د پکسلونو کارول
کله چې تاسو د چوکۍ ارزښت په توګه پکسل کاروئ، پایله ډیره ساده ده. که تاسو د سند د سرلیک چوکۍ کې د عنصر چوکۍ ارزښت په سلو کې 100 پکسل پراخ سره تنظیم کړئ، نو دا عنصر به ورته اندازې وي چې تاسو د ویب پاڼې محتوا یا فوټر کې 100 پکسلز پراخ کړی یا د پاڼه. پکسلز یو مطلق ارزښت دی، له دې کبله 100 پکسلس 100 پیکرې نه لري چې ستاسو سند په کوم عنصر کې ښکاري. له بده مرغه، پداسې حال کې چې د پکسل ارزښتونه په پوهیدو کې اسانه دي، دوی په ځوابي ویب پاڼو کې ښه کار نه کوي.
ایتان مارکوټ د "ځواب ویونکي ویب ډیزاین" اصطلاح وټاکه، چې دا تګالره یې تشریح کړه لکه 3 کلیدي اصول:
- د مايع ګريډ
- مايع رسنۍ
- د رسنیو پوښتنو
لومړنۍ دوه ټکي، د مايع ګیډ او مايع میډیا، د سایټ کولو ارزښتونو لپاره د پکسلونو پرځای، فیصده کارولو سره ترلاسه کیږي.
د چوکۍ ارزښتونو لپاره فیصده کارول
کله چې تاسو د عنصر لپاره چوکۍ جوړولو لپاره فیصده کارولې، حقیقي اندازه چې عنصر یې په ارادې کې څرګندوي توپیر لري چې دا په کوم سند کې دی. سلنه یوه نسبتا ارزښت دی، پدې مانا چې د اندازې اندازه ښودل ستاسو په سند کې د نورو عناصرو سره تړاو لري.
د مثال په توګه، که تاسو د عکس چوکۍ 50٪ ته ټاکئ، دا پدې معنی نلري چې عکس به د خپل عادي انداز نیمایي برخه وي. دا یو عام غلط فهم دی.
که یو انځور په مستقیم ډول 600 پکسلز پراخ وي نو بیا د CSS ارزښت کارول د دې ښودلو لپاره چې په 50٪ کې ښودل کیږي پدې مانا ندي چې دا به په ویب براؤزر کې 300 پکسلز پراخه وي. د دې ارزښت ارزښت د هغه عنصر پر بنسټ حساب شوی چې په هغه کې شامل دی، د عکس اصلي ځای نه دی. که کنټینر (کوم چې ویش یا یو بل بل ایچ ایل عنصر وي) 1000 کیلو ګرامه پراخوالی لري، نو بیا به تصویر په 500 پکسلونو کې ښودل شي ځکه چې دا ارزښت د کانتینر د چوکۍ٪ 50 دی. که چیرې موجود عنصر 400 کیلو ګرامه پراخ وي نو بیا به انځور یوازې 200 پکسلیکونه نندارې ته وړاندې کړي، ځکه چې دا ارزښت 50 کنټینر لري. د پوښتنې انځور دلته 50٪ اندازه لري چې په بشپړ ډول هغه عنصر پورې اړه لري چې پکې شامل وي.
په یاد ولرئ، ځواب ورکوونکي ډیزاین مایع دی. لیټونه او اندازې به د سکرین اندازه / تجهیزات بدلون بدل کړي . که تاسو په فزیکي، غیر انترنتی شرایطو کې فکر کوئ، دا د ګوتو بکس لري چې تاسو د بسته کولو موادو سره ډک کړئ. که تاسو وایئ چې بکس باید نیمایي د دې موادو څخه ډک وي، د اړتیا وړ پیکنگ اندازه به د بکس د اندازې پر بنسټ توپیر ولري. ورته د ویب ډیزاین کې د فیصدو چوکونو لپاره ریښتیا لري.
سلنه د نورو سلنه پر بنسټ
په انځور / کنټینر کې د مثال په توګه، ما د هغه عناصر لپاره پکسل ارزښتونه کارولي ترڅو وښیي چې ځواب ورکوونکي انځور به څنګه ښودل شي. په حقیقت کې، مشتمل عنصر به فیصده او عکس، یا نور عناصر ته وټاکل شي، دننه کنټرینر کې به د ارزښتونو فیصدي پر اساس خپل ارزښتونه ترلاسه کړي.
دلته یو بل مثال دی چې دا په عمل کې ښیي.
ووایاست چې تاسو داسې وېب پاڼه لرئ چېرته چې ټول سایټ د ویش دننه د "کانټینر" (یو عام ویب ډيزاین عمل) سره شتون لري. دننه ویش درې نورې برخې دي چې تاسو به بالاخره د درې عمودی کالمونو په توګه وښایئ. دا HTML کولی شي داسې ښکاري:
اوس، تاسو کولی شئ د "کنټینر" ویش اندازه اندازه کړئ ترڅو 90٪ ووایی. په دې مثال کې، د کانټینر ډوی بله عنصر نه لري چې دا د بدن پرته بل ځای لري، کوم چې موږ کوم مشخص ارزښت ته ندی ټاکلی. د ډیزاین په واسطه، بدن به د براؤزر کړکۍ 100٪ چمتو کړي. نو ځکه، د "کانټینر" برخې فیصده د براؤزر کړکۍ د اندازې پر بنسټ وي. لکه څنګه چې د دې برنر کړکۍ په اندازې کې بدلون راوړي، نو د دې "کنینر" اندازه به وي. نو که د براؤزر کړکۍ 2000 کیلو پکوالی پراخ وي، دا تقسیم به په 1800 پکسل کې ښودل شي. دا د 90٪ 2000 (2000 x .90 = 1800) په توګه حساب شوی،) کوم چې د برنر اندازه دی.
که چیرې په "کنینر" کې وموندل شو هر یو "کول" ویشونه 30٪ ته رسیږي، بیا به هر یو به په دې مثال کې 540 پکسلز پراخه وي. دا د 1800 پکسلونو 30٪ جوړوي چې کانټینر یې په (1800 x .30 = 540) کې راځي. که موږ د دې کانټینر سلنې بدل کړو، دا داخلي ویشونه به په اندازې کې بدلون ومومي ځکه چې دوی د هغه عنصر په تړاو پورې اړه لري.
اجازه راکړو چې د براؤزر کړکۍ په 2000 پکسلز کې پاتې شي، مګر موږ د کانټینر سلنې ارزښت د 90٪ پرځای 80٪ ته بدلون ورکوو. دا پدې مانا ده چې دا به اوس 1600 پکسلز پراخه وي (2000 x .80 = 1600). حتی که موږ د 3 "کول" ویشونو د اندازې لپاره سی ایس ایس نه بدل کړو او په 30٪ کې یې پریږدئ، دوی به اوس د دوی عناصرو له مخې توپیر وړاندې کړي، کوم چې هغه د دوی شکل دی، بدلون موندلی. دا درې برخې به د 480 پکسلز پراخه وي، هر یو به د 1600 څخه 30٪، یا د کانټینر اندازه (1600 x 30 = 480) وي.
که څه هم د دې "ډیل" ویشونو څخه د یو انځور انځور و، او دا انځور د فیصدو څخه کارول شوی، د دې سایټ لپاره یې شرایط "کول" وي. لکه څنګه چې د "کول" ویش د اندازې په بدل کې بدل شوی، نو د دې عکس به دننه وی. نو که د براؤزر یا "کنټینر" اندازه بدل شي، دا به په دریو "کول" ویزو باندې اغیزه وکړي، کوم چې په بدل کې به د "کول" دننه د عکس اندازه بدل کړي لکه څنګه چې تاسو لیدلی شئ، دا ټول ټول دا د فیصدو پیسو د سیولو ارزښتونو ته راځي.
کله چې تاسو فکر کوئ چې څنګه د یوې ویب پاڼې دننه عنصر د فیصدی قیمت د هغې د چوکۍ لپاره کارول کیږي، تاسو اړتیا لرئ په هغه شرایطو پوه شئ چې کوم عنصر د پاڼې په نښه کې پاتې دی.
په لنډیز کې
سلنه د ځواب ورکوونکو ویب پاڼو لپاره د ترتیب په جوړولو کې مهم رول لوبوي. که تاسو په ځوابي ډول انځورونه سمبال یا د فیصدو چوکونو څخه کار واخلئ چې د ریښتینې مايع ګیډ جوړ کړئ چې اندازه یې یو بل سره اړیکه لري، نو دا پوهیږي چې تاسو به یې د غوښتلو لپاره اړین وي.