یہ تحریر Tailwind CSS میں ریسپانسیو بریک پوائنٹس کو استعمال کرنے کے طریقہ کی وضاحت کرے گی۔
Tailwind میں ریسپانسیو بریک پوائنٹس کا استعمال کیسے کریں؟
Tailwind میں ریسپانسیو بریک پوائنٹس استعمال کرنے کے لیے، ریسپانسیو موڈیفائر استعمال کریں، جیسے کہ ' sm '،' md '،' ایل جی '،' xl 'اور' 2xl HTML پروگرام میں دوسری کلاسوں کے ساتھ۔ پھر، HTML ویب صفحہ دیکھیں اور اسکرین کا سائز تبدیل کریں تاکہ یہ یقینی بنایا جا سکے کہ بریک پوائنٹس ٹھیک سے کام کر رہے ہیں۔
مرحلہ 1: HTML پروگرام میں ریسپانسیو موڈیفائر استعمال کریں۔
ایک HTML پروگرام بنائیں اور مطلوبہ اسٹائل کے ساتھ ریسپانسیو موڈیفائر کا استعمال کریں۔ مثال کے طور پر، ہم نے استعمال کیا ہے ' sm '،' md '،' ایل جی '،' xl 'اور' 2xl جوابی ترمیم کنندگان:
< جسم >
< div کلاس = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 کلاس = 'text-7xl متن-سفید متن-مرکز p-20' > لینکس کا اشارہ < / h1 >
< / div >
< / جسم >
یہاں:
- ' bg-fuchsia-400 کلاس پس منظر کا رنگ سیٹ کرتی ہے۔ fuchsia کرنے کے لئے.
- ' sm:bg-pink-600 ” کلاس چھوٹی اسکرینوں کے پس منظر پر گلابی رنگ کا اطلاق کرتی ہے۔
- ' md:bg-green-700 ” کلاس درمیانی اسکرینوں پر پس منظر کے رنگ کو سبز کر دیتی ہے۔
- ' lg:bg-purple-50 ” کلاس بڑی اسکرینوں کے لیے پس منظر کا رنگ ارغوانی پر سیٹ کرتی ہے۔
- ' xl:bg-teal-600 ” کلاس اضافی بڑی اسکرینوں کے پس منظر پر نیلے رنگ کا اطلاق کرتی ہے۔
- ' 2xl:bg-yellow-500 کلاس 2xl اسکرینوں پر پس منظر کے رنگ کو پیلے رنگ میں تبدیل کرتی ہے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اس بات کی تصدیق کے لیے کہ آیا ریسپانسیو بریک پوائنٹس ٹھیک سے کام کر رہے ہیں یا نہیں، HTML ویب صفحہ دیکھیں:
مذکورہ ویب پیج میں دیکھا جا سکتا ہے کہ ویب پیج کا رنگ اسکرین کے سائز کے ساتھ بدل رہا ہے جس کے مطابق بریک پوائنٹس بتائے گئے تھے۔
نتیجہ
Tailwind میں ریسپانسیو بریک پوائنٹس استعمال کرنے کے لیے، ریسپانسیو موڈیفائر استعمال کریں، جیسے کہ ' sm '،' md '،' ایل جی '،' xl 'اور' 2xl HTML پروگرام میں دوسری کلاسوں کے ساتھ۔ یہ ترمیم کنندگان کو اسکرین کے سائز کی بنیاد پر کسی خاص عنصر پر مختلف طرزیں لگانے کے لیے استعمال کیا جاتا ہے۔ اس تحریر نے Tailwind CSS میں ریسپانسیو بریک پوائنٹس کو استعمال کرنے کے طریقہ کار کی مثال دی ہے۔