یہ مضمون درج ذیل خاکہ کا استعمال کرتے ہوئے Tailwind بریک پوائنٹس اور میڈیا کے سوالات پر کم از کم اونچائی اور زیادہ سے زیادہ اونچائی کا اطلاق کرنے کا طریقہ کار فراہم کرے گا:
- ٹیل ونڈ بریک پوائنٹس اور میڈیا کے سوالات پر کم سے کم اونچائی والی پراپرٹی سیٹ کرنا
- ٹیل ونڈ بریک پوائنٹس اور میڈیا کے سوالات پر زیادہ سے زیادہ اونچائی والی پراپرٹی سیٹ کرنا
ٹیل ونڈ بریک پوائنٹ اور میڈیا کے سوالات پر کم سے کم اونچائی کی پراپرٹی کیسے سیٹ کریں؟
Tailwind مختلف اسکرین سائزز کے لیے ڈیزائن کو ریسپانسیو بنانے کے لیے ڈیفالٹ بریک پوائنٹس اور میڈیا کے سوالات فراہم کرتا ہے۔ بریک پوائنٹس کو فراہم کردہ خصوصیات اس وقت لاگو ہوتی ہیں جب اسکرین کا مخصوص سائز پورا ہوجاتا ہے۔ ان ڈیفالٹ بریک پوائنٹس کے لیے کم از کم چوڑائی اس طرح بیان کی گئی ہے:
- sm: '640px' کی کم از کم چوڑائی۔
- md: '768px' کی کم از کم چوڑائی۔
- ایل جی: '1024px' کی کم از کم چوڑائی۔
- xl: '1280px' کی کم از کم چوڑائی۔
- 2xl: '1536px' کی کم از کم چوڑائی۔
کم سے کم اونچائی کی خاصیت کسی عنصر کی اونچائی کے لیے کم حد مقرر کرتی ہے۔ اس کا مطلب ہے کہ یہ کم از کم اونچائی کی وضاحت کرتا ہے جس کی کسی عنصر کو رکھنے کی اجازت ہے۔ ٹیل ونڈ میں بریک پوائنٹس کے ساتھ کم سے کم اونچائی کی خاصیت کو استعمال کرنے کے لیے، درج ذیل نحو استعمال کیا جاتا ہے:
< div کلاس = '{breakpoint prefix}:min-h-{value}...' > < / div >
آئیے بہتر تفہیم حاصل کرنے کے لیے اوپر بیان کردہ نحو کو مظاہرے میں استعمال کریں۔ اس مثال میں، عنصر کے لیے کم از کم اونچائی کی حد ' md 'بریک پوائنٹ۔ اس کے نتیجے میں عنصر کی مجموعی اونچائی میں اضافہ ہوگا۔
< div کلاس = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' > اسکرین کو بڑھائیں۔ سائز کم از کم اونچائی کو بڑھانے کے لیے< / div >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- ' h-48 کلاس div عنصر کو 192px کی اونچائی فراہم کرتی ہے۔
- ' w-48 کلاس div عنصر کو 192px کی اونچائی فراہم کرتی ہے۔
- ' rounded-md کلاس div عنصر کو راؤنڈ کارنر فراہم کرتا ہے۔
- ' bg-{color}-{number} کلاس div عنصر کے پس منظر کو مخصوص رنگ فراہم کرتا ہے۔
- ' متن کا مرکز کلاس متنی عنصر کو div عنصر کے مرکز میں رکھتی ہے۔
- ' md:min-h-اسکرین 'کلاس کم از کم اونچائی کی حد کو 100% اسکرین کی اونچائی کے برابر بڑھا دے گی۔
آؤٹ پٹ:
یہ آؤٹ پٹ میں دیکھا جا سکتا ہے، کہ جب ' md ” سکرین کا سائز پورا ہو گیا ہے، عنصر کو سکرین کی اونچائی کا 100% ملے گا۔ ایسا اس لیے ہوتا ہے کیونکہ کم از کم اونچائی کی حد ' md بریک پوائنٹ اسکرین کی اونچائی کے برابر سیٹ کیا گیا ہے:
ٹیل ونڈ بریک پوائنٹ اور میڈیا کے سوالات پر زیادہ سے زیادہ اونچائی والی پراپرٹی کیسے سیٹ کریں؟
زیادہ سے زیادہ اونچائی کی کلاس Tailwind میں اونچائی کی خاصیت کے لیے اوپری حد متعین کرتی ہے۔ اس کا مطلب یہ ہے کہ یہ عنصر کی زیادہ سے زیادہ اونچائی کی وضاحت کرتا ہے۔ بریک پوائنٹس کے ساتھ کم از کم اونچائی کی کلاس استعمال کرنے کا نحو درج ذیل ہے:
< div کلاس = '{breakpoint prefix}:max-h-{size}...' > < / div >آئیے بہتر تفہیم حاصل کرنے کے لیے اوپر بیان کردہ نحو کو مظاہرے میں استعمال کریں۔ اس مثال میں، عنصر کو ایک مخصوص زیادہ سے زیادہ اونچائی کی حد کے ساتھ فراہم کیا جائے گا md 'بریک پوائنٹ۔ یہ عنصر کو فراہم کردہ ڈیفالٹ اونچائی کو کم کردے گا۔
< div کلاس = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' > اسکرین کو بڑھائیں۔ سائز کم از کم اونچائی کو بڑھانے کے لیے< / div >نوٹ کریں کہ مذکورہ کوڈ میں، ایک عنصر کی ڈیفالٹ اونچائی 'h-96' یعنی 384px کے ساتھ فراہم کی گئی ہے۔ تاہم، جب 'md' بریک پوائنٹ پورا ہو جاتا ہے تو یہ اونچائی '240px' تک کم ہو جاتی ہے۔ یہ اس کی وجہ سے ہے ' md:max-h-60 'کلاس.
آؤٹ پٹ:
مندرجہ ذیل آؤٹ پٹ میں، یہ واضح طور پر دیکھا جا سکتا ہے کہ ایک بار جب سکرین کا سائز ' md ” بریک پوائنٹ، عنصر کی عنصر کی اونچائی چھوٹی ہو جاتی ہے۔
یہ سب ٹیل ونڈ بریک پوائنٹس کے ساتھ کم از کم اور زیادہ سے زیادہ اونچائی کی پراپرٹی کو ترتیب دینے کے بارے میں ہے۔
نتیجہ
Tailwind بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ زیادہ سے زیادہ اونچائی کی خاصیت سیٹ کرنے کے لیے، ' {breakpoint prefix}:max-h-{size} 'کلاس استعمال کیا جاتا ہے. اسی طرح، ٹیل ونڈ بریک پوائنٹس کے ساتھ کم از کم اونچائی کی خاصیت مقرر کرنے کے لیے، ' {breakpoint prefix}:min-h-{size} 'کلاس استعمال کیا جاتا ہے. اس مضمون نے ٹیل ونڈ میں بریک پوائنٹس اور میڈیا کے سوالات پر کم سے کم اور زیادہ سے زیادہ اونچائی کی خصوصیات کو لاگو کرنے کا طریقہ کار فراہم کیا ہے۔