מאמר זה ידגים את השיטה לניצול ה'פריצה אחרי' עם נקודות שבירה ושאילתות מדיה ב-Tailwind CSS.
כיצד לנצל 'פריצה אחרי' עם נקודות פריצה ושאילתות מדיה ברוח הגבית?
כדי להשתמש ב-'break-after' עם נקודות שבירה ושאילתות מדיה, הגדר ערכים וסגנון שונים עבור גדלי מסך שונים עם כלי השירות 'break-after' בתוכנת HTML. לאחר מכן, אמת את הפלט על ידי צפייה בדף האינטרנט של HTML.
הבה נבחן את היישום המעשי:
שלב 1: השתמש בנקודות פריצה ושאילתות מדיה עם כלי השירות 'break-after'.
צור תוכנית HTML וציין ערכים וסגנון שונים עבור גדלים שונים של מסך עם כלי השירות 'הפסקה אחרי'. לדוגמה, השתמשנו ב' md ' נקודת שבירה עם ' הפסקה-אחרי-עמודה כלי השירות וה- lg ' נקודת שבירה עם ' הפסקה-אחרי-הימנעות כלי עזר:
< גוּף >
< div מעמד = 'עמודות-2 bg-teal-400' >
< ע מעמד = 'md:break-after-column lg:break-after-avoid' > שלום... < / ע >
< ע > ברוך הבא... < / ע >
< ע > למד על Tailwind CSS... < / ע >
< ע > זוהי מסגרת CSS... < / ע >
< ע > ביי... < / ע >
< / div >
< / גוּף >
כאן:
- ה ' md:break-after-column ' מחלקה מציינת שמעבר עמודה צריך להתרחש אחרי אלמנט
הספציפי הזה ב-' md 'נקודת שבירה (גודל מסך בינוני).
- ה ' lg:break-after-avoid מחלקה מציעה שהאלמנט צריך להימנע מהפסקה ב-' lg 'נקודת שבירה (גודל מסך גדול).
שלב 2: אימות פלט
ודא אם נקודות השבירה ושאילתות המדיה הוחלו על ידי צפייה בדף האינטרנט HTML:
בדף האינטרנט הנ'ל, הפסקת העמודות התרחשה ברכיב שצוין במסך הבינוני, והפריצה לאחר נמנעה במסך הגדול.
סיכום
כדי להשתמש ב'פריצה אחרי' עם נקודות עצירה ושאילתות מדיה ב-Tailwind, ראשית, צור קובץ HTML. לאחר מכן, השתמש בנקודות השבירה ובשאילתות המדיה עם כלי השירות 'פריצה אחרי' על ידי ציון ערכים וסגנון שונים עבור גדלי מסך שונים. לאימות, הפעל את תוכנית ה-HTML וצפה בדף האינטרנט. מאמר זה הדגים את השיטה להשתמש ב'פריצה אחרי' עם נקודות שבירה ושאילתות מדיה ב-Tailwind CSS.