כתיבה זו תמחיש את השיטה של החלת נקודות עצירה ושאילתות מדיה על כלי השירות 'הצפת' ב-Tailwind CSS.
כיצד לנצל נקודות שבירה ושאילתות מדיה עם 'הצפה' ב-Tailwind?
כדי להחיל נקודות שבירה ושאילתות מדיה מסוימות על כלי עזר 'הצפה' ב-Tailwind, צור מבנה HTML. לאחר מכן, השתמש ב' md ' או ' lg ' נקודות שבירה עם הרצוי 'overflow-
דוגמא
בדוגמה זו, נשתמש ב- 'md' נקודת שבירה עם 'גלילת גדות' שירות ב
מיכל כדי להוסיף אליו את פסי הגלילה ותמיד מציג אותם בגודל מסך בינוני: < גוּף >
< div מעמד = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS מספק כלי עזר שונים מסוג 'הצפה', כגון
'הצפה-אוטומטית', 'הצפת-גלילה', 'הצפה-מוסתרת', 'גלולה לגלישה'
וכו'. כלי עזר אלה קובעים כיצד אלמנט ספציפי מטפל בתוכן
החורג מגודל המיכל. כל כלי שירות מציע פונקציונליות ייחודית,
עם זאת, המטרה הסופית שלהם נשארת זהה, כלומר לשלוט על ההצפה
התנהגות האלמנט הנבחר.
< / div >
< / גוּף >
כאן:
- ה 'הצפה אוטומטית' המחלקה משמשת להוספת פסי הגלילה ל- מיכל והצג אותם רק כאשר יש צורך בגלילה.
- ה 'md:overflow-scroll' class מוסיפה את פסי הגלילה ותמיד מציגה אותם ב- 'md' נקודת שבירה (גודל מסך בינוני).
תְפוּקָה:
על פי הפלט לעיל, נקודות שבירה ושאילתות מדיה יושמו בהצלחה בכלי השירות 'הצפת'.
סיכום
להחלת נקודות שבירה ושאילתות מדיה על כלי עזר 'הצפה' ב-Tailwind, השתמש ב-' sm ', ' md ' או ' lg ' נקודות שבירה עם הרצוי ' overflow-