כתיבה זו תמחיש את השיטה לשימוש בנקודות השבירה הרספונסיביות ב-Tailwind CSS.
כיצד להשתמש בנקודות שבירה רספונסיביות ב-Tailwind?
כדי להשתמש בנקודות עצירה רספונסיביות ב-Tailwind, השתמשו בשינויים המגיבים, כגון ' sm ', ' md ', ' lg ', ' xl ' ו' 2xl ' עם המחלקות האחרות בתוכנת HTML. לאחר מכן, הצג את דף האינטרנט של HTML ושנה את גודל המסך כדי להבטיח שנקודות השבירה פועלות כהלכה.
שלב 1: השתמש ב-Responsive Modifiers בתוכנית HTML
צור תוכנית HTML והשתמש במתנים הרספונסיביים עם הסגנון הרצוי. לדוגמה, השתמשנו ב' sm ', ' md ', ' lg ', ' xl ' ו' 2xl 'שינויים מגיבים:
< גוּף >
< div מעמד = '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 >
< / div >
< / גוּף >
כאן:
- ' bg-fuchsia-400 מחלקה מגדירה את צבע הרקע של לפוקסיה.
- ' sm:bg-pink-600 הכיתה מחילה צבע ורוד על הרקע עבור מסכים קטנים.
- ' md:bg-green-700 הכיתה משנה את צבע הרקע לירוק במסכים בינוניים.
- ' lg:bg-purple-50 מחלקה מגדירה את צבע הרקע לסגול עבור מסכים גדולים.
- ' xl:bg-teal-600 הכיתה מחילה צבע צהבהב על הרקע עבור מסכים גדולים במיוחד.
- ' 2xl:bg-yellow-500 מחלקה משנה את צבע הרקע לצהוב במסכי 2xl.
שלב 2: אימות פלט
הצג את דף האינטרנט של HTML כדי לוודא אם נקודות השבירה הרספונסיביות פועלות כהלכה או לא:
בדף האינטרנט הנ'ל ניתן לראות שצבע דף האינטרנט משתנה עם גודל המסך לפיו צוינו נקודות השבירה.
סיכום
כדי להשתמש בנקודות עצירה רספונסיביות ב-Tailwind, השתמשו בשינויים המגיבים, כגון ' sm ', ' md ', ' lg ', ' xl ' ו' 2xl ' עם המחלקות האחרות בתוכנת HTML. משנים אלה משמשים להחלת סגנונות שונים על אלמנט מסוים בהתבסס על גודל המסך. כתיבה זו הדגים את השיטה לשימוש בנקודות השבירה הרספונסיביות ב- Tailwind CSS.