מאמר זה ידגים את השיטה להחלת נקודות עצירה ושאילתות מדיה בכלי השירות 'הצדקת-תוכן' ב-Tailwind.
כיצד להחיל נקודות שבירה ושאילתות מדיה עם 'הצדקת תוכן' ב-Tailwind?
כדי להחיל נקודות שבירה ושאילתות מדיה מסוימות על כלי שירות 'הצדקת תוכן' ב-Tailwind, צור מבנה HTML. לאחר מכן, הגדר את הערך הרצוי ל- 'הצדיק-<ערך>' כלי עזר עבור גדלי מסך שונים באמצעות ' md ' או ' lg 'נקודות שבירה. לאחר מכן, שנה את גודל המסך של דף האינטרנט לצורך אימות.
דוגמא כאן: תְפוּקָה הפלט לעיל מראה שהיישור האופקי של הפריטים הגמישים משתנה ככל שגודל המסך משתנה. זה מצביע על כך שנקודות השבירה ושאילתות המדיה שצוינו יושמו ביעילות עם כלי השירות 'הצדק-תוכן'. להחלת נקודות שבירה ושאילתות מדיה עם כלי עזר 'הצדיק תוכן' ב-Tailwind, הגדר את הערך הרצוי ל- 'הצדיק-<ערך>' כלי עזר עבור גדלי מסך שונים על ידי שימוש ב' md ' או ' lg 'נקודות שבירה. לאימות, שנה את גודל המסך של דף האינטרנט והבטח שינויים. מאמר זה הדגים את הדוגמה להחלת נקודות עצירה ושאילתות מדיה רצויות על כלי השירות 'הצדיק תוכן' ב-Tailwind.
בדוגמה למטה, יש לנו מיכל flex עם המאפיין 'justify-start'. נשתמש ב' md נקודת שבירה עם ה 'להצדיק-בין' שירות ו' lg נקודת שבירה עם ה 'להצדיק-סוף' שירות ב '
< גוּף >
< div מעמד = 'flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700' >
< div מעמד = 'bg-yellow-400 w-24 h-12' > 1 < / div >
< div מעמד = 'bg-yellow-400 w-24 h-12' > 2 < / div >
< div מעמד = 'bg-yellow-400 w-24 h-12' > 3 < / div >
< / div >
< / גוּף >
סיכום