جانیں کہ ویب براؤزر کس طرح فی صد اقدار کا استعمال کرتے ہوئے ایک ڈسپلے کا تعین کرتے ہیں
ذمہ دار ویب ڈیزائن کے بہت سے طلباء چوڑائی اقدار کے لئے فی صد استعمال کرتے وقت ایک مشکل وقت ہے. خاص طور پر، وہاں الجھن ہے کہ براؤزر ان فیصدوں کا حساب کیسے کرتا ہے. ذیل میں آپ کو ایک ذمہ دار ویب سائٹ میں چوڑائی کے حساب کے لئے فی صد کام کی شرح کا ایک تفصیلی وضاحت مل جائے گا.
چوڑائی قیمتوں کے لئے پکسلز کا استعمال کرتے ہوئے
جب آپ چوڑائی قیمت کے طور پر پکسلز استعمال کرتے ہیں تو نتائج بہت سیدھے ہیں. اگر آپ کسی دستاویز کے ہیڈر میں ایک عنصر کی چوڑائی قیمت کو 100 پکسلز وسیع سے مقرر کرنے کے لئے سی ایس ایس کا استعمال کرتے ہیں تو، اس عنصر میں ایک ہی سائز ہو گا جسے آپ ویب سائٹ کے مواد یا فوٹر میں 100 پکسلز وسیع پیمانے پر مقرر کرتے ہیں. صفحہ. پکسلز ایک مطلق قدر ہیں، لہذا 100 پکسلز 100 پکسلز ہیں، اس بات سے کوئی فرق نہیں پڑتا ہے کہ آپ کے دستاویز میں عنصر ظاہر ہوتا ہے. بدقسمتی سے، پکسل کے اقدار کو سمجھنے کے لئے آسان ہے، وہ ذمہ دار ویب سائٹس میں اچھی طرح سے کام نہیں کرتے ہیں.
ایتان مارکوٹ نے "ذمہ دار ویب ڈیزائن" اصطلاح کو سنبھال لیا، اس نقطۂ نظر کی وضاحت کرتے ہوئے 3 کلیدی پرنسپل کے مطابق:
- ایک سیال گرڈ
- مائع میڈیا
- میڈیا سوالات
ان کی پہلی دو پوائنٹس، ایک سیال گرڈ اور سیال میڈیا، قیمتوں کے سائز کے لئے، پکسلز کے بجائے فی صد کا استعمال کرتے ہوئے حاصل کیا جاتا ہے.
چوڑائی قیمتوں کے لئے فی صد کا استعمال کرتے ہوئے
جب آپ ایک عنصر کے لئے ایک چوڑائی قائم کرنے کے لئے فی صد استعمال کرتے ہیں، تو اصل عنصر اس پر ظاہر ہوتا ہے کہ یہ دستاویز میں کہاں ہے. فی صد ایک نسبتا قدر ہیں، مطلب یہ ہے کہ سائز کا سائز آپ کے دستاویز کے دیگر عناصر سے متعلق ہے.
مثال کے طور پر، اگر آپ تصویر کی چوڑائی 50٪ تک مقرر کرتے ہیں، تو اس کا یہ مطلب نہیں ہے کہ تصویر اس کے عام سائز کے نصف میں دکھائے گا. یہ ایک عام غلط فہمی ہے.
اگر کوئی تصویر natively 600 پکسلز کی وسیع ہے، تو اسے 50٪ پر ظاہر کرنے کے لئے سی ایس ایس کی قدر استعمال کرنا اس کا مطلب یہ نہیں ہے کہ یہ ویب براؤزر میں 300 پکسلز وسیع ہو جائے گا. یہ فی صد قدر اس عنصر پر مبنی ہے جس میں اس تصویر پر مشتمل ہے، نہ ہی تصویر کا اصل سائز. اگر کنٹینر (جو تقسیم یا کسی دوسرے ایچ ٹی ایم ایل عنصر ہو سکتا ہے) 1000 پکسلز وسیع ہے، تو تصویر 500 پکسلز پر ظاہر کرے گی کیونکہ اس قدر کنٹینر کی چوڑائی کا 50 فی صد ہے. اگر مشتمل عنصر 400 پکسلز وسیع ہے، تو اس تصویر کو صرف 200 پکسلز میں دکھایا جائے گا، کیونکہ اس کی قیمت 50 کنٹینر ہے. یہاں سوال میں تصویر 50٪ کا سائز ہے جس پر اس عنصر پر مکمل طور پر منحصر ہے جس میں اس پر مشتمل ہے.
یاد رکھیں، ذمہ دار ڈیزائن سیال ہے. اسکرین سائز / آلہ کی تبدیلیوں کے مطابق لے آؤٹ اور سائز تبدیل ہوجائیں گے. اگر آپ اس کے بارے میں سوچتے ہیں تو جسمانی، غیر ویب شرائط، یہ گتے والے باکس کی طرح ہے جسے آپ پیکنگ کے مواد سے بھر رہے ہیں. اگر آپ کہتے ہیں کہ باکس کو نصف ہونا چاہئے اس مواد سے، آپ کی ضرورت پیکنگ کی رقم باکس کے سائز کے لحاظ سے مختلف ہو جائے گا. اسی طرح ویب ڈیزائن میں فی صد کی چوڑائیوں کے لئے سچ ہے.
دیگر فیصد فی صد کی بنیاد پر فی صد
تصویر / کنٹینر کی مثال میں، میں نے ایسے عنصر کے لئے پکسل اقدار کا استعمال کیا تھا جو ظاہر کرنے کے لۓ کہ کس طرح ذمہ دار تصویر دکھائے گی. حقیقت میں، عناصر میں ایک فیصد اور تصویر، یا دیگر عناصر کو بھی سیٹ کیا جائے گا، کنٹینر کے اندر اندر ان کی قیمتوں میں فی صد کے فی صد کی بنیاد پر مل جائے گا.
یہاں ایک اور مثال ہے جو اس میں عملی طور پر دکھاتا ہے.
کہہ دو کہ آپ کی ویب سائٹ ہے جہاں پوری سائٹ "کنٹینر" (ایک عام ویب ڈیزائن مشق) کے ساتھ ڈویژن کے اندر اندر موجود ہے. اس تقسیم کے اندر تین دیگر تقسیم ہیں کہ آپ آخر میں 3 عمودی کالمز کے طور پر ظاہر کرنے کے لئے سٹائل کریں گے. یہ 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 "col" ڈیوژنوں کے سائز کے لئے سی ایس ایس کو تبدیل نہیں کرتے ہیں اور انہیں 30 فی صد چھوڑ دیں گے تو، ان کے عنصر کے بعد سے وہ مختلف طریقے سے پیش کریں گے، جو اس کے سیاق و سباق کے ذریعہ ہے. ان 3 ڈویژنوں کو اب 480 پکسلز وسیع سے ہر ایک کے طور پر پیش کیا جائے گا، جو 16٪ کی 1600 ہے، یا کنٹینر کا سائز (1600 x 30 = 480) ہے.
اس سے بھی زیادہ، اگر یہ "کول" ڈویژنوں میں سے ایک کے اندر ایک تصویر تھی اور اس تصویر میں ایک فیصد کا استعمال کیا گیا تھا، اس کے سائز کے لئے سیاق و سباق "کول" ہو گا. جیسا کہ "کول" ڈویژن سائز میں بدل گیا ہے، اس کے اندر اندر تصویر کرے گا. لہذا اگر براؤزر کا سائز یا "کنٹینر" بدل گیا تو یہ تین "col" ڈویژنوں کو متاثر کرے گا، جس میں "col." کے اندر تصویر کا سائز تبدیل ہوجائے گا جیسا کہ آپ دیکھ سکتے ہیں، یہ سب کچھ منسلک ہوتے ہیں یہ فی صد پر مبنی sizing اقدار کی بات ہوتی ہے.
جب آپ غور کرتے ہیں کہ کسی ویب صفحہ کے اندر ایک عنصر اس وقت پیش کرے گا جب اس کی چوڑائی کے لئے فی صد قدر استعمال ہوتا ہے، تو آپ اس سیاقے کو سمجھنے کی ضرورت ہے جس میں اس عنصر کے صفحے کے مارک اپ میں رہتا ہے.
خلاصہ
ذمہ دار ویب سائٹس کے لۓ ترتیب بنانے میں فی صد ایک اہم کردار ادا کرتے ہیں. چاہے آپ سایڈائڈنگ تصاویر کو جوابی طور پر یا فیڈ چوڑائی کا استعمال کرتے ہوئے واقعی سیال گرڈ بنانے کے لۓ جن کے سائز ایک دوسرے سے تعلق رکھتے ہیں، ان حسابات کو سمجھنے کے لۓ آپ کو اپنی مرضی کے مطابق حاصل کرنا ضروری ہے.