آپ سی ایس ایس میڈیا سوالات کو کیسے لکھتے ہیں؟

کم از کم اور زیادہ سے زیادہ چوڑائی میڈیا کے سوالات دونوں کے لئے مطابقت رکھتا ہے

قبول ویب ڈیزائن ویب صفحات بنانے کے لئے ایک نقطہ نظر ہے جہاں وہ صفحات وزیٹر کے اسکرین کے سائز پر مبنی طور پر اپنی ترتیب اور ظہور کو تبدیل کرسکتے ہیں. بڑے اسکرینوں کو ان بڑے ڈسپلے پر موزوں ایک ترتیب ملتا ہے جبکہ چھوٹے آلات جیسے موبائل فون بھی اسی طرح کی ویب سائٹ حاصل کرسکتی ہیں جس طرح اس چھوٹی چھوٹی اسکرین کے لئے موزوں ہے. یہ نقطہ نظر تمام صارفین کے لئے بہتر صارف کا تجربہ فراہم کرتا ہے اور یہ بھی سرچ انجن کی درجہ بندی کو بہتر بنانے میں مدد کرسکتا ہے. ذمہ دار ویب ڈیزائن کا ایک اہم حصہ CSS میڈیا سوالات ہے.

میڈیا سوالات آپ کی ویب سائٹ کے سی ایس ایس فائل کے اندر کچھ چھوٹی سی شرطی بیانات کی طرح ہوتے ہیں، جو آپ کو مخصوص سی ایس ایس کے قوانین کو مقرر کرنے کی اجازت دیتا ہے جو ایک مخصوص حالت سے ملنے کے بعد ہی اثر انداز ہوجائے گی. جیسے کہ اسکرین کا سائز کچھ حد سے زیادہ اوپر یا نیچے ہے.

ایکشن میں میڈیا سوالات

تو آپ ایک ویب سائٹ پر میڈیا سوالات کیسے استعمال کرتے ہیں؟ یہاں ایک بہت آسان مثال ہے:

1. آپ کسی بھی بصری شیلیوں سے آزاد طریقے سے منظم ایچ ٹی ایم ایل دستاویز کے ساتھ شروع کریں گے (جو کہ سی ایس ایس کے لئے ہے)
2. آپ کی سی ایس ایس فائل میں، آپ اس طرح شروع کریں گے جیسے آپ عام طور پر صفحے کو اسٹائل کرتے ہیں اور ویب سائٹ کس طرح نظر آئیں گے کے لئے ایک بنیادی لائن قائم کریں. کہہ دو کہ آپ کا صفحہ کا فونٹ سائز 16 پکسلز ہونا چاہئے، آپ اس سی ایس ایس لکھ سکتے ہیں: جسم {فون سائز: 16px؛ }
3. اب، آپ بڑے اسکرینز کے لۓ اس فونٹ سائز میں اضافہ کرنا چاہتے ہیں جو اس سے زیادہ قابل ریل اسٹیٹ ہے. یہ میڈیا میڈیا کہاں ہے جس میں لات. آپ اس طرح میڈیا میڈیا کو شروع کریں گے:media screen اور (min-width: 1000px) {}
4. یہ میڈیا سوالات کا نحوق ہے. یہ میڈیا کے سوال خود کو قائم کرنے کیلئےmedia کے ساتھ شروع ہوتا ہے. اس کے بعد آپ "میڈیا کی قسم" مقرر کرتے ہیں، جس میں اس کیس میں "اسکرین" ہے. یہ ڈیسک ٹاپ کمپیوٹر کی اسکرینز، گولیاں، فون وغیرہ وغیرہ پر لاگو ہوتا ہے. آخر میں، آپ میڈیا سوالات کو "میڈیا کی خصوصیت" کے ساتھ ختم کردیں. مندرجہ بالا ہمارے مثال میں، "مڈ چوڑائی: 1000px" ہے. اس کا مطلب یہ ہے کہ میڈیا سوالات ڈسپلے کے لئے کم از کم چوڑائی 1000 پکسلز وسیع ہو گی.

1. میڈیا سوال کے ان عناصر کے بعد، آپ کسی بھی عام سی ایس ایس کی حکمرانی میں کیا کریں گے اسی طرح کی افتتاحی اور اختتامی گھوبگھرالی کڑا شامل کریں.
2. ایک میڈیا سوال کا حتمی مرحلہ یہ ہے کہ اس شرط کو پورا کرنے کے بعد سی ایس ایس قواعد شامل کریں جو آپ درخواست کرنا چاہتے ہیں. آپ ان میڈیا سیشن قوانین کو شامل کریں جن کے ذریعہ میڈیا سوالات مرتب ہوتے ہیں، جیسے جیسے:media اسکرین اور (منٹ-چوڑائی: 1000px) {جسم {font-size: 20px؛ }
3. جب میڈیا سوالات کی شرائط پوری ہوتی ہیں (براؤزر کی ونڈو کم از کم 1000 پکسلز وسیع ہے)، یہ سی ایس ایس سٹائل اثر انداز ہوگا، ہماری سائٹ کے فونٹ سائز کو 16 پکسلز سے تبدیل کر دیا جائے گا جس میں ہم اصل میں 20 پکسلز کی نئی قیمت پر قائم ہیں.

مزید طرزیں شامل

آپ اس میڈیا سوال کے اندر اندر بہت سارے سی ایس ایس کے قوانین کو اپنی سائٹ کی بصری ظہور کو ایڈجسٹ کرنے کی ضرورت ہوسکتے تھے. مثال کے طور پر، اگر آپ چاہتے ہیں کہ فونٹ سائز کو صرف 20 پکسلز میں نہ بڑھایا جائے بلکہ بل پیراگراف کے رنگ کو (# 000000) میں تبدیل بھی کریں تو آپ اسے شامل کرسکتے ہیں:

media اسکرین اور (منٹ کی چوڑائی: 1000px) {جسم {فونٹ سائز: 20px؛ } p {رنگ: # 000000؛ }}

مزید میڈیا سوالات کو شامل کرنا

اضافی طور پر، آپ ہر بڑے سائز کے لئے مزید میڈیا سوالات شامل کر سکتے ہیں، اور اس طرح آپ کے سٹائل شیٹ میں شامل کر سکتے ہیں:

media اسکرین اور (منٹ کی چوڑائی: 1000px) {جسم {فونٹ سائز: 20px؛ } p {رنگ: # 000000؛ {}media سکرین اور (منٹ چوڑائی: 1400px) {جسم {فونٹ سائز: 24px؛ }}

پہلے میڈیا سوالات میں 1000 پکسلز وسیع ہوچکے ہیں، فونٹ سائز کو 20 پکسلز میں تبدیل کر دیں گے. اس کے بعد براؤزر 1400 پکسلز سے پہلے ایک بار، فونٹ کا سائز 24 پکسلز میں دوبارہ بدل جائے گا. آپ اپنی خاص ویب سائٹ کے لئے ضرورت کے مطابق بہت سے میڈیا سوالات شامل کرسکتے ہیں.

کم چوڑائی اور زیادہ سے زیادہ چوڑائی

میڈیا سوالات عام طور پر لکھنے کے دو طریقے ہیں - "کم چوڑائی" یا "زیادہ سے زیادہ چوڑائی" کے ساتھ استعمال کرتے ہوئے. اب تک، ہم نے "کم سے کم" کارروائی میں دیکھا ہے. اس کا سبب بنتا ہے کہ جب میڈیا براؤزر کم از کم چوڑائی تک پہنچ جائے تو میڈیا سوالات اثر انداز ہوجائیں. لہذا براؤزر کم از کم 1000 پکسلز وسیع ہے جب ایک سوال "min-width: 1000px" استعمال ہوتا ہے. میڈیا سوال کا یہ انداز استعمال کیا جاتا ہے جب آپ کسی "ویب - سب سے پہلے" انداز میں سائٹ کی تعمیر کررہے ہیں.

اگر آپ "زیادہ سے زیادہ چوڑائی" کا استعمال کرتے ہیں، تو یہ مخالف طریقے سے کام کرتا ہے. براؤزر کو اس سائز سے نیچے گرنے کے بعد ایک میڈیا سوال "زیادہ سے زیادہ چوڑائی: 1000px" لاگو ہوتا ہے.

پرانے براؤزر کے بارے میں

میڈیا سوالات کے ساتھ ایک چیلنج انٹرنیٹ ایکسپلورر پر پرانے ورژن میں حمایت کی کمی ہے. شکرگزار، وہاں دستیاب موجود ہیں کہ ان پرانے براؤزرز میں میڈیا سوالات کی حمایت کی جا سکتی ہے، جس سے آپ انہیں آج ویب سائٹس پر استعمال کرنے کی اجازت دیتے ہیں جبکہ اس بات کو یقینی بناتا ہے کہ اس سائٹ کا ڈسپلے بڑی عمر کے براؤزر سافٹ ویئر میں نہیں ٹوٹا.

1/24/17 پر جیریمی Girard کی طرف سے ترمیم