מאמר זה ידגים את השיטה להחלת נקודות עצירה ושאילתות מדיה על כלי השירות 'הצלולים' ב-Tailwind.
כיצד לנצל נקודות שבירה ושאילתות מדיה על 'נקה' ב-Tailwind?
כדי להחיל נקודות שבירה ושאילתות מדיה מסוימות על כלי עזר 'נקיים' ב-Tailwind, צור מבנה HTML. לאחר מכן, הגדר את הערך הרצוי ל' ברור-<ערך> ' כלי שירות עבור גדלי מסך שונים באמצעות ' md ' או ' lg 'נקודות שבירה. לבסוף, שנה את גודל המסך של דף האינטרנט לצורך אימות.
דוגמא
בדוגמה זו, נשתמש ב-' md ' נקודת שבירה עם ' תנקה את שניהם 'תועלת ו' lg ' נקודת שבירה עם ' ברור-אין כלי השירות ב- ' רכיב כדי לשנות את מיקומו בגודל מסך בינוני וגדול:
< גוּף >
< div מעמד = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' מעמד = 'float-left p-3 w-28 h-24' הכל = 'תמונה' / >
< img src = 'tailwindcss_img.png' מעמד = 'צף-ימינה p-3' הכל = 'תמונה' / >
< ע מעמד = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS מספק כלי עזר 'צפים' לשליטה על גלישת תוכן סביב אלמנט.
דוגמה זו תראה כיצד להשתמש בנקודות עצירה ושאילתות מדיה עם כלי השירות 'נקה' ב-Tailwind. < / ע >
< / div >
< / גוּף >
כאן:
- 'צף-שמאלי' class מרחף את האלמנטים לצד השמאלי של המכולה.
- 'צף-ימינה' class מרחף את האלמנטים לצד ימין של המכולה.
- 'נקי-שמאל' class מזיזה את האלמנט
מתחת לרכיב המרחף שמאלה במיכל.
- 'md:clear-both' class מנקה גם צפים משמאל וגם ימני וממקם את האלמנט
מתחתיהם בגודל מסך בינוני.
- 'lg:clear-none' class משבית כל ברור שהוחל על אלמנט
ומאפשר לאלמנט לצוף על שני הצדדים של המיכל בגודל מסך גדול.
תְפוּקָה
על פי הפלט לעיל, נקודות השבירה ושאילתות המדיה שצוינו הוחלו בהצלחה על כלי השירות 'נקה'.
סיכום
להחלת נקודות שבירה ושאילתות מדיה על כלי עזר 'נקה' ב- Tailwind, הגדר את הערך הרצוי ל- ' ברור-<ערך> ' כלי עזר עבור גדלי מסך שונים על ידי שימוש ב' md ' או ' lg 'נקודות שבירה. לאימות, שנה את גודל המסך של דף האינטרנט והבטח שינויים. מאמר זה הדגים את הדוגמה להחלת נקודות שבירה ושאילתות מדיה ספציפיות על כלי השירות 'הצלולים' ב-Tailwind.