ستوضح هذه المقالة طريقة استخدام 'الفاصل' مع نقاط التوقف واستعلامات الوسائط في Tailwind CSS.
كيف يمكن الاستفادة من 'الفواصل اللاحقة' مع نقاط التوقف واستعلامات الوسائط في Tailwind؟
للاستفادة من 'الفاصل التالي' مع نقاط التوقف واستعلامات الوسائط ، حدد قيمًا وأنماط مختلفة لأحجام شاشات مختلفة باستخدام الأداة المساعدة 'break-after' في برنامج HTML. بعد ذلك ، تحقق من الإخراج من خلال عرض صفحة الويب بتنسيق HTML.
دعونا نستكشف التنفيذ العملي:
الخطوة 1: استخدم Breakpoints and Media Queries مع الأداة المساعدة 'break-after'
قم بإنشاء برنامج HTML وحدد قيمًا وأنماط مختلفة لأحجام مختلفة للشاشة باستخدام الأداة المساعدة 'break-after'. على سبيل المثال ، استخدمنا ' م 'فاصل مع' فاصل بعد العمود 'فائدة و' إل جي 'فاصل مع' كسر بعد تجنب ' جدوى:
< جسم >
< شعبة فصل = 'أعمدة -2 bg-teal-400' >
< ص فصل = 'md: break-after-column lg: break-after-تجنب' > مرحبًا... < / ص >
< ص > اهلا بك هنا... < / ص >
< ص > تعرف على معلومات حول Tailwind CSS ... < / ص >
< ص > إنه إطار CSS ... < / ص >
< ص > الوداع... < / ص >
< / شعبة >
< / جسم >
هنا:
- ال ' md: فاصل بعد العمود تشير فئة 'إلى أن فاصل عمود يجب أن يحدث بعد عنصر
المحدد في' م 'نقطة توقف (حجم شاشة متوسط).
- ال ' lg: كسر بعد تجنب يقترح 'class أن العنصر يجب أن يتجنب الفاصل عند' إل جي 'نقطة توقف (حجم شاشة كبير).
الخطوة 2: تحقق من الإخراج
تحقق مما إذا كانت نقاط التوقف واستعلامات الوسائط قد تم تطبيقها من خلال عرض صفحة الويب بتنسيق HTML:
في صفحة الويب أعلاه ، حدث فاصل العمود على العنصر المحدد في الشاشة المتوسطة ، وتم تجنب الفاصل التالي على الشاشة الكبيرة.
خاتمة
للاستفادة من 'الفاصل' مع نقاط التوقف واستعلامات الوسائط في Tailwind ، أنشئ ملف HTML أولاً. بعد ذلك ، استخدم نقاط التوقف واستعلامات الوسائط مع الأداة المساعدة 'break-after' من خلال تحديد قيم وأنماط مختلفة لأحجام الشاشات المختلفة. للتحقق ، قم بتشغيل برنامج HTML واعرض صفحة الويب. لقد أوضحت هذه المقالة طريقة استخدام 'الفاصل' مع نقاط التوقف واستعلامات الوسائط في Tailwind CSS.