ایک ذمہ دار ویب سائٹ کو ڈیزائن کرتے ہوئے، Tailwind ' بریک پوائنٹس 'اور' میڈیا کے سوالات متعدد فنکشنلٹیز کو لاگو کرنے میں کلیدی کردار ادا کریں جنہیں آسانی سے مختلف اسکرین سائزز میں ڈھال لیا جا سکتا ہے۔ یہ خصوصیات مختلف کلاسوں کے ذریعے بیان کی جائیں گی یعنی، ' md (درمیانے سائز کی اسکرینز)'، 'lg (بڑے سائز کی اسکرین)' یا '@media کے ذریعے قاعدہ جو مخصوص حالت کی بنیاد پر افعال کو جوڑتا ہے۔
یہ مضمون درج ذیل مواد کا احاطہ کرتا ہے:
- ٹیل ونڈ بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ ٹیکسٹ ڈیکوریشن کی موٹائی کا اطلاق کیسے کریں؟
- ٹیل ونڈ بریک پوائنٹس کے ساتھ ٹیکسٹ ڈیکوریشن کی موٹائی کا اطلاق کرنا۔
- Tailwind میڈیا سوالات کے ساتھ متن کی سجاوٹ کی موٹائی کا اطلاق کرنا۔
ٹیل ونڈ بریک پوائنٹس اور میڈیا کے سوالات کے ساتھ ٹیکسٹ ڈیکوریشن کی موٹائی کا اطلاق کیسے کریں؟
' متن کی سجاوٹ کی موٹائی 'کی مدد سے لاگو کیا جا سکتا ہے' متن کی سجاوٹ کی موٹائی ” پراپرٹی جس کے بعد ہدف کی موٹائی کی قیمت پکسلز میں ہوتی ہے۔ یہ پکسلز ہو سکتے ہیں ' 1px'، '2px'، '4px' یا '8px ' ' بریک پوائنٹس ' کا استعمال کرتے ہوئے صارف کے اسکرین کے سائز کے مطابق مختلف لاگو کردہ فنکشنلٹیز کو اپنانے کے لیے لاگو کیا جاتا ہے۔ md (درمیانے سائز کی اسکرینیں)'، 'lg (بڑے سائز کی اسکرین) 'کلاسز، وغیرہ' میڈیا کے سوالات '@ کے ذریعے براؤزر اور OS پیرامیٹرز کے سیٹ کی بنیاد پر مشروط نفاذ کے انداز کو فعال کریں۔ میڈیا 'قاعدہ
مثال 1: ٹیل ونڈ بریک پوائنٹس کے ساتھ ٹیکسٹ ڈیکوریشن موٹائی کا اطلاق
یہ مثال متن کی سجاوٹ کی موٹائی کو مختلف پوائنٹس پر سیٹ کرتی ہے اس انداز کو لاگو کرنے کے لیے جو اسکرین کے سائز کے مطابق مختلف ہوتی ہے:
< html >
< سر >
< میٹا چار سیٹ = 'utf-8' >
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' >
< عنوان >< / عنوان >
< سکرپٹ src = 'https://cdn.tailwindcss.com' >< / سکرپٹ >
< / سر >
< جسم >
< ٹیکسٹیریا کلاس = 'انڈر لائن md:decoration-8 lg:box-decoration-slice text-Black text-2xl' آئی ڈی = 'درجہ حرارت' > یہ Linuxhint ہے۔ < / ٹیکسٹیریا >
< / جسم >
< / html >
اس کوڈ کے ٹکڑوں کے مطابق، ذیل میں دیے گئے اقدامات کا اطلاق کریں:
- سب سے پہلے، Tailwind فنکشنلٹیز کو لاگو کرنے کے لیے CDN پاتھ شامل کریں۔
- پھر، ایک '< ٹیکسٹیریا >' کے ذریعے پہلے سے طے شدہ اور درمیانی اسکرینوں پر بیان کردہ متن کی سجاوٹ کی موٹائی کی سطح کو عنصر اور شامل کریں۔ md 'کلاس، بالترتیب.
- ' متن سیاہ 'اور' text-2xl کلاسز بالترتیب رنگ (سیاہ) اور فونٹ سائز یعنی 2xl متن کے لیے مختص کرتی ہیں۔
آؤٹ پٹ
اس نتیجے سے، یہ ظاہر کیا جا سکتا ہے کہ متن کی سجاوٹ کی موٹائی مختلف سکرین کے سائز کے لیے مناسب طریقے سے ڈھال لی گئی ہے۔
مثال 2: Tailwind میڈیا سوالات کے ساتھ متن کی سجاوٹ کی موٹائی کا اطلاق
'@ میڈیا میڈیا سوالات میں قاعدہ کا استعمال میڈیا کی مختلف اقسام/آلات کے لیے مختلف طرزوں کو نافذ کرنے کے لیے کیا جاتا ہے۔ یہ خاص مظاہرہ ایک مخصوص پیرامیٹر/حالت کی بنیاد پر متن کی موٹائی کو سجانے کے لیے ان میڈیا سوالات کا استعمال کرتا ہے:
< html >
< سر >
< میٹا چار سیٹ = 'utf-8' >
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' >
< عنوان >< / عنوان >
< سکرپٹ src = 'https://cdn.tailwindcss.com' >< / سکرپٹ >
< / سر >
< جسم >
< h1 آئی ڈی = 'درجہ حرارت' >یہ لینکس ہینٹ ہے< / h1 >
< / جسم >
< / html >
< انداز قسم = 'متن/سی ایس ایس' >
#درجہ حرارت {
ٹیکسٹ ڈیکوریشن: انڈر لائن؛
متن- سیدھ میں لانا : مرکز
}
@ میڈیا ( زیادہ سے زیادہ چوڑائی :550px ) {
#درجہ حرارت {
ٹیکسٹ ڈیکوریشن موٹائی: 4px؛
} }
< / انداز >
کوڈ کے اس بلاک میں، ذیل میں فراہم کردہ طریقوں پر غور کریں:
- اسی طرح، CDN پاتھ بھی شامل کریں۔
- پھر، ایک '< شامل کریں۔ h1 >' بیان کردہ 'id' والا عنصر۔
- کوڈ کے سی ایس ایس حصے میں، “< کے اندر انداز >' ٹیگ، شامل سرخی کو سٹائل کریں۔
- اس کے علاوہ، “@ بنائیں میڈیا ' قاعدہ جو ایک شرط کا اطلاق کرتا ہے جیسے کہ جب تک اسکرین کی چوڑائی ہے ' 550px '، متن کی سجاوٹ کی موٹائی ' پر سیٹ ہے 4 ' پکسلز
- یہ اس طرح ہے کہ اسکرین کی چوڑائی اس حد سے تجاوز کرنے کے بعد، متن کو آسانی سے انڈر لائن کیا جائے گا۔
آؤٹ پٹ
یہ نتیجہ اس بات کی نشاندہی کرتا ہے کہ '@media' اصول یعنی میڈیا سوالات کا اطلاق اسکرین کی چوڑائی کے مطابق ہوتا ہے۔
نتیجہ
بریک پوائنٹس اور میڈیا سوالات کو متن کی سجاوٹ کی موٹائی کے ساتھ لاگو کیا جا سکتا ہے تاکہ مختلف کلاسوں کا استعمال کرتے ہوئے صارف کی سکرین کے سائز کے مطابق لاگو کردہ فنکشنلٹیز کو ظاہر کیا جا سکے۔ ایم ڈی، 'ایل جی یا '@ کے ذریعے میڈیا بالترتیب قاعدہ۔ مؤخر الذکر نقطہ نظر میں بیان کیا گیا ہے ' سی ایس ایس ” کوڈ جو ہدف کے عنصر کو طلب کرتا ہے اور اسے سیٹ پیرامیٹر/حالت کی بنیاد پر سجاتا ہے۔ اس گائیڈ نے ٹیل ونڈ بریک پوائنٹ اور میڈیا سوالات کے ساتھ ٹیکسٹ ڈیکوریشن موٹائی کو لاگو کرنے کے بارے میں تفصیل سے بتایا ہے۔