מאמר זה יספק את ההליך להחלת גובה מינימלי וגובה מקסימלי על נקודות שבירה של Tailwind ושאילתות מדיה באמצעות המתווה הבא:
- הגדרת מאפיין גובה מינימלי בנקודות עצירה ושאילתות מדיה
- הגדרת מאפיין גובה מקסימלי בנקודות פריצה ושאילתות מדיה
כיצד להגדיר מאפיין גובה מינימלי ב-Tailwind Breakpoint ושאילתות מדיה?
Tailwind מספק ברירת מחדל נקודות עצירה ושאילתות מדיה להפיכת העיצוב למגיב עבור גדלי מסך שונים. המאפיינים שסופקו לנקודות השבירה מוחלים כאשר גודל המסך שצוין מתקיים. הרוחב המינימלי עבור נקודות עצירה ברירת מחדל אלה מתואר כדלקמן:
- sm: רוחב מינימלי של '640px'.
- md: רוחב מינימלי של '768px'.
- lg: רוחב מינימלי של '1024px'.
- xl: רוחב מינימלי של '1280px'.
- 2xl: רוחב מינימלי של '1536px'.
המאפיין min-height מגדיר את הגבול התחתון לגובה של אלמנט. זה אומר שהוא מציין את הגובה המינימלי שמותר לאלמנט להחזיק. כדי להשתמש במאפיין min-height עם נקודות השבירה ב-Tailwind, נעשה שימוש בתחביר הבא:
< div מעמד = '{prefixpoint}:min-h-{value}...' > < / div >
בואו נשתמש בתחביר שהוגדר לעיל בהדגמה כדי לקבל הבנה טובה יותר. בדוגמה זו, מגבלת הגובה המינימלית עבור האלמנט תגדל ב-' md ' נקודת שבירה. זה יביא להגדלת הגובה הכולל של האלמנט.
< div מעמד = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' >הגדל את המסך גודל כדי להגדיל את הגובה המינימלי< / div >
ההסבר לקוד לעיל הוא כדלקמן:
- ה ' h-48 ” class מספקת גובה של 192px לאלמנט div.
- ה ' w-48 ” class מספקת גובה של 192px לאלמנט div.
- ה ' מעוגל-md ” class מספקת את הפינה העגולה לאלמנט div.
- ה ' bg-{color}-{number} ” class מספקת את הצבע שצוין לרקע של אלמנט div.
- ה ' מרכז טקסט ” class ממקמת את אלמנט הטקסט במרכז אלמנט ה-div.
- ה ' md:min-h-screen 'הכיתה תגדיל את מגבלת הגובה המינימלית שווה ל-100% גובה המסך.
תְפוּקָה:
ניתן לראות בפלט, שכאשר ' md גודל המסך מתקיים, האלמנט יקבל את 100% מגובה המסך. זה קורה מכיוון שמגבלת הגובה המינימלית עבור ' md 'נקודת השבירה מוגדרת שווה לגובה המסך:
כיצד להגדיר מאפיין גובה מקסימלי ב-Tailwind Breakpoint ושאילתות מדיה?
דרגת הגובה המקסימלית קובעת את הגבול העליון למאפיין הגובה ב-Tailwind. זה אומר שהוא מציין את הגובה המקסימלי שאלמנט יכול להחזיק. התחביר לשימוש בדרגת הגובה המינימלית עם נקודות שבירה הוא כדלקמן:
< div מעמד = '{prefixpoint}:max-h-{size}...' > < / div >בואו נשתמש בתחביר שהוגדר לעיל בהדגמה כדי לקבל הבנה טובה יותר. בדוגמה זו, האלמנט יסופק עם מגבלת גובה מקסימלית ספציפית עבור ' md ' נקודת שבירה. זה יצמצם את גובה ברירת המחדל המסופק לאלמנט.
< div מעמד = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' >הגדל את המסך גודל כדי להגדיל את הגובה המינימלי< / div >שימו לב שבקוד לעיל, גובה ברירת המחדל של אלמנט מסופק עם 'h-96' כלומר 384px. עם זאת, גובה זה מצטמצם ל-'240px' כאשר נקודת השבירה 'md' מתקיימת. זאת בשל ' md:max-h-60 ' מעמד.
תְפוּקָה:
בפלט למטה, ניתן לראות בבירור שברגע שגודל המסך מגיע ל' md ” נקודת שבירה, גובה האלמנט של האלמנט הולך וקטן.
זה הכל לגבי הגדרת תכונת הגובה המינימלית והמקסימלית עם נקודות השבירה של Tailwind.
סיכום
כדי להגדיר את מאפיין הגובה המרבי עם נקודות השבירה של Tailwind ושאילתות המדיה, ' {breakpoint prefix}:max-h-{size} 'מחלקה משמשת. באופן דומה, כדי להגדיר את מאפיין הגובה המינימלי עם נקודות השבירה של Tailwind, ' {breakpoint prefix}:min-h-{size} 'מחלקה משמשת. מאמר זה סיפק את ההליך להחלת מאפייני גובה מינימום ומקסימום על נקודות שבירה ושאילתות מדיה ב-Tailwind.