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