ستوضح هذه الكتابة طريقة استخدام نقاط التوقف سريعة الاستجابة في Tailwind CSS.
كيفية استخدام نقاط التوقف المستجيبة في Tailwind؟
لاستخدام نقاط التوقف سريعة الاستجابة في Tailwind ، استخدم المُعدِّلات سريعة الاستجابة ، مثل ' سم '،' م '،' إل جي '،' xl ' و ' 2xl 'مع الفئات الأخرى في برنامج HTML. بعد ذلك ، قم بعرض صفحة الويب بتنسيق HTML وقم بتغيير حجم الشاشة للتأكد من أن نقاط التوقف تعمل بشكل صحيح.
الخطوة 1: استخدم معدِّلات سريعة الاستجابة في برنامج HTML
قم بإنشاء برنامج HTML واستخدم المعدلات سريعة الاستجابة مع التصميم المطلوب. على سبيل المثال ، استخدمنا ' سم '،' م '،' إل جي '،' xl ' و ' 2xl 'المُعدِّلات سريعة الاستجابة:
< جسم >
< شعبة فصل = 'h-screen bg-fuchsia-400 sm: bg-pink-600 md: bg-green-700 lg: bg-purple-500 xl: bg-teal-600 2xl: bg-yellow-500' >
< h1 فصل = 'text-7xl text-white text-center p-20' > تلميح لينكس < / h1 >
< / شعبة >
< / جسم >
هنا:
- ' bg- فوشيا -400 'فئة تحدد لون خلفية ملف إلى الفوشيه.
- ' sm: bg-pink-600 'فئة تطبق اللون الوردي على الخلفية للشاشات الصغيرة.
- ' MD: bg-green-700 'الطبقة تغير لون الخلفية إلى اللون الأخضر على الشاشات المتوسطة.
- ' ال جي: bg-purple-50 'تعيين لون الخلفية إلى اللون الأرجواني للشاشات الكبيرة.
- ' xl: bg-teal-600 'فئة تطبق لون أزرق مخضر على الخلفية للشاشات الكبيرة جدًا.
- ' 2xl: bg-yellow-500 'فئة تغير لون الخلفية إلى اللون الأصفر على شاشات 2xl.
الخطوة 2: تحقق من الإخراج
اعرض صفحة الويب بتنسيق HTML للتحقق مما إذا كانت نقاط التوقف سريعة الاستجابة تعمل بشكل صحيح أم لا:
في صفحة الويب أعلاه ، يمكن ملاحظة أن لون صفحة الويب يتغير مع حجم الشاشة التي تم تحديد نقاط التوقف وفقًا لها.
خاتمة
لاستخدام نقاط التوقف سريعة الاستجابة في Tailwind ، استخدم المُعدِّلات سريعة الاستجابة ، مثل ' سم '،' م '،' إل جي '،' xl ' و ' 2xl 'مع الفئات الأخرى في برنامج HTML. تُستخدم هذه المعدلات لتطبيق أنماط مختلفة على عنصر معين بناءً على حجم الشاشة. لقد جسدت هذه الكتابة طريقة استخدام نقاط التوقف المتجاوبة في Tailwind CSS.