ستوفر هذه المقالة الإجراء الخاص بتطبيق الحد الأدنى للارتفاع والحد الأقصى للارتفاع على نقاط توقف Tailwind واستعلامات الوسائط باستخدام المخطط التفصيلي التالي:
- تعيين خاصية الحد الأدنى للارتفاع على نقاط توقف الرياح الخلفية واستعلامات الوسائط
- تعيين خاصية الحد الأقصى للارتفاع على نقاط توقف الرياح الخلفية واستعلامات الوسائط
كيفية تعيين خاصية الحد الأدنى للارتفاع على نقطة توقف الرياح الخلفية واستعلامات الوسائط؟
يوفر Tailwind نقاط التوقف الافتراضية واستعلامات الوسائط لجعل التصميم مستجيبًا لأحجام الشاشات المختلفة. يتم تطبيق الخصائص المتوفرة لنقاط التوقف عند استيفاء حجم الشاشة المحدد. يتم وصف الحد الأدنى لعرض نقاط التوقف الافتراضية هذه كما يلي:
- ن: الحد الأدنى للعرض '640 بكسل'.
- م: الحد الأدنى للعرض '768 بكسل'.
- إل جي: الحد الأدنى للعرض '1024 بكسل'.
- XL: الحد الأدنى للعرض '1280 بكسل'.
- 2xl: الحد الأدنى للعرض '1536 بكسل'.
تقوم الخاصية min-height بتعيين الحد الأدنى لارتفاع العنصر. وهذا يعني أنه يحدد الحد الأدنى للارتفاع المسموح للعنصر بامتلاكه. لاستخدام خاصية min-height مع نقاط التوقف في Tailwind، يتم استخدام بناء الجملة التالي:
< شعبة فصل = '{بادئة نقطة التوقف}:min-h-{value}...' > < / شعبة >
دعونا نستخدم بناء الجملة المحدد أعلاه في العرض التوضيحي للحصول على فهم أفضل. في هذا المثال، سيزيد الحد الأدنى لارتفاع العنصر في ' دكتور في الطب 'نقطة توقف. سيؤدي هذا إلى زيادة الارتفاع الكلي للعنصر.
< شعبة فصل = 'h-48 w-48 rounded-md bg-green-500 مركز النص md:min-h-screen' > تكبير الشاشة مقاس لزيادة الحد الأدنى للارتفاع< / شعبة >
شرح الكود أعلاه هو كما يلي:
- ال ' ح-48 'توفر الفئة ارتفاعًا قدره 192 بكسل لعنصر div.
- ال ' ث-48 'توفر الفئة ارتفاعًا قدره 192 بكسل لعنصر div.
- ال ' مدور-MD توفر الفئة 'الزاوية المستديرة لعنصر div.
- ال ' ب ج-{اللون}-{رقم} توفر الفئة ' اللون المحدد لخلفية عنصر div.
- ال ' مركز النص تضع الفئة 'عنصر النص في منتصف عنصر div.
- ال ' مد: دقيقة-ح-الشاشة 'ستزيد الفئة الحد الأدنى للارتفاع بما يعادل 100% من ارتفاع الشاشة.
انتاج:
ويمكن أن نرى في الإخراج، أنه عندما ' دكتور في الطب إذا تم استيفاء حجم الشاشة، سيحصل العنصر على 100% من ارتفاع الشاشة. يحدث هذا لأن الحد الأدنى للارتفاع لـ ' دكتور في الطب 'يتم تعيين نقطة التوقف مساوية لارتفاع الشاشة:
كيفية تعيين خاصية الحد الأقصى للارتفاع على نقطة توقف الرياح الخلفية واستعلامات الوسائط؟
تحدد فئة الحد الأقصى للارتفاع الحد الأعلى لخاصية الارتفاع في Tailwind. وهذا يعني أنه يحدد الحد الأقصى للارتفاع الذي يمكن أن يمتلكه العنصر. بناء جملة استخدام الحد الأدنى لفئة الارتفاع مع نقاط التوقف هو كما يلي:
< شعبة فصل = '{بادئة نقطة التوقف}:max-h-{size}...' >