یہ مضمون وضاحت کرے گا کہ ٹیل ونڈ میں پوزیشن پراپرٹی کے ساتھ مل کر بریک پوائنٹ اور میڈیا کے استفسار کو کیسے استعمال کیا جائے۔
پوزیشن پراپرٹی کے ساتھ بریک پوائنٹس اور میڈیا سوالات کا استعمال کیسے کریں؟
بریک پوائنٹس ایک حتمی جوابی ڈیزائن بنانے کے لیے بنیادی بلاکس ہیں۔ اس کا استعمال ترتیب کو مختلف اسکرین سائز کے مطابق بنانے کے لیے کیا جاتا ہے۔ میڈیا کے سوالات کو اسکرین ریزولوشن کے لحاظ سے عناصر پر مخصوص انداز لاگو کرنے کے لیے استعمال کیا جاتا ہے۔ پوزیشن وصف کو ان کے ساتھ مل کر لاگو کیا جا سکتا ہے تاکہ آؤٹ پٹ کو زیادہ بہتر بنایا جا سکے۔
مرحلہ 1: بریک پوائنٹس اور میڈیا سوالات کے ساتھ پوزیشن پراپرٹی کا اطلاق کرنا
اس مرحلے میں، بریک پوائنٹس کے ساتھ پوزیشن پراپرٹی کو لاگو کرنے کے لیے پروگرام ڈالا جاتا ہے یا منتخب کردہ 'پر میڈیا سوالات ص عنصر:
< جسم کلاس = 'bg-slate-500' >
< div کلاس = 'متن-پیلا-300 p-4 lg:p-8' >
< ص کلاس = 'رشتہ دار md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4' > اس متن میں اسکرین کے سائز کی بنیاد پر مختلف فونٹ سائز ہوں گے۔ یہ چھوٹی اسکرینوں پر چھوٹی، درمیانی اسکرین پر درمیانے سائز اور بڑی اسکرینوں پر بڑی ہوگی۔ < / ص >
< / div >
< / جسم >
اس کوڈ میں:
- ' bg-slate-500 ” پس منظر کا رنگ گرے پر سیٹ کرتا ہے۔
- ' متن-پیلا-300 متن کا رنگ پیلے رنگ میں بدلتا ہے۔
- ' p-4 ” 4px کی پیڈنگ شامل کرتا ہے۔
- ' lg: p-8' بڑی اسکرینوں پر 8px کی پیڈنگ شامل کرتا ہے۔
- ابتدائی پوزیشن کا استعمال کر کے پیرنٹ پیج کے نسبت سیٹ کیا جاتا ہے۔ رشتہ دار 'کلاس.
- ' md:text-lg ایک درمیانے سائز کی سکرین پر متن کو بڑا بناتا ہے۔
- 'ایم ڈی: مطلق' درمیانے سائز کی اسکرین پر متن کی پوزیشن کو رشتہ دار سے مطلق میں تبدیل کرتا ہے۔
- ' md:translate-x-4' اور 'md:translate-y-4' درمیانی اسکرین کے سائز پر متن کو 4px نیچے اور دائیں جانب منتقل کریں۔
- ' lg:text-xl ” بڑے سائز کی اسکرین پر متن کے سائز کو اضافی بڑے میں تبدیل کرتا ہے۔
- ' ایل جی: جامد ” بڑے سائز کی سکرین پر بنیادی صفحہ کے حوالے سے متن کی پوزیشن کو مطلق سے جامد میں تبدیل کرتا ہے۔
- ' lg:translate-x-4 'اور' lg:translate-y-4 ” ایک بڑی سکرین کے سائز پر متن کو 4px نیچے اور دائیں طرف لے جائیں۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اوپر والے کوڈ کے ذریعے بنائے گئے ویب پیج کا جائزہ لیں اور اس تبدیلی کو دیکھنے کے لیے اسکرین کے سائز کو ایڈجسٹ کریں:
یہ دیکھا جا سکتا ہے کہ متن درمیانے اور بڑے اسکرین کے سائز پر ردعمل ظاہر کرتا ہے۔
نتیجہ
Tailwind میں بریک پوائنٹس اور میڈیا کے سوالات استعمال کرنے کے لیے بریک پوائنٹ کا اطلاق کریں اور ہر بریک پوائنٹ پر میڈیا استفسار سیٹ کریں، اور اسکرین کے مختلف بریک پوائنٹس پر پوزیشن کی خاصیت کو بھی تبدیل کریں۔ پہلے سے طے شدہ خرابیاں ہیں ' sm '،' md '،' ایل جی '، اور ' xl ' اس بلاگ نے دکھایا ہے کہ ٹیل ونڈ میں پوزیشن پراپرٹی کے ساتھ بریک پوائنٹ اور میڈیا کے استفسار کو کیسے استعمال کیا جائے۔