מאמר זה יסביר כיצד להשתמש בנקודת הפסיקה ובשאילתת המדיה בשילוב עם מאפיין המיקום ב-Tailwind.
כיצד לנצל נקודות שבירה ושאילתות מדיה עם נכס מיקום?
נקודות פריצה הן אבני הליבה ליצירת עיצוב רספונסיבי אולטימטיבי. הוא משמש כדי להפוך את הפריסה להתאמה לגדלי מסך שונים. שאילתות מדיה משמשות להחלת סגנונות שצוינו על אלמנטים בהתאם לרזולוציית המסך. ניתן להחיל את תכונת המיקום בשילוב עם אלה כדי להפוך את הפלט למיטוב יותר.
שלב 1: החלת מאפיין המיקום עם נקודות פריצה ושאילתות מדיה
בשלב זה, התוכנית מוכנסת כדי להחיל את מאפיין המיקום לאורך נקודות השבירה או שאילתות המדיה על ' ע ' אלמנט:
< גוּף מעמד = 'bg-slate-500' >
< div מעמד = 'טקסט-צהוב-300 p-4 lg:p-8' >
< ע מעמד = 'relative md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > לטקסט הזה יהיו גדלי גופן שונים בהתאם לגודל המסך. הוא יהיה קטן יותר במסכים קטנים, בינוני במסכים בינוניים וגדול יותר במסכים גדולים. < / ע >
< / div >
< / גוּף >
בקוד הזה:
- ' bg-slate-500 ' מגדיר את צבע הרקע לאפור.
- ' טקסט-צהוב-300 ' משנה את צבע הטקסט לצהוב.
- ' p-4 ' מוסיף ריפוד של 4 פיקסלים.
- ' lg: p-8 אינץ' מוסיף ריפוד של 8 פיקסלים במסכים גדולים.
- המיקום ההתחלתי נקבע ביחס לדף האב באמצעות ' קרוב משפחה ' מעמד.
- ' md:text-lg ' הופך את הטקסט לגדול במסך בגודל בינוני.
- 'md:absolute' משנה את מיקום הטקסט מיחסי למוחלט במסך בגודל בינוני.
- ' md:translate-x-4' ו 'md:translate-y-4' הזז את הטקסט 4 פיקסלים למטה וימינה בגודל מסך בינוני.
- ' lg:text-xl ' משנה את גודל הטקסט לגדול במיוחד במסך בגודל גדול.
- ' lg:סטטי ” משנה את מיקום הטקסט ביחס לעמוד האב ממוחלט לסטטי במסך בגודל גדול
- ' lg:translate-x-4 ' ו' lg:translate-y-4 ' הזז את הטקסט 4 פיקסלים למטה וימינה בגודל מסך גדול.
שלב 2: אמת את הפלט
הצג תצוגה מקדימה של דף האינטרנט שנוצר על ידי הקוד למעלה והתאם את גודל המסך כדי לראות את השינוי כך:
ניתן לראות שטקסט מראה התנהגות רספונסיבית בגדלים של מסך בינוני וגדול.
סיכום
כדי להשתמש בנקודות עצירה ושאילתות מדיה ב-Tailwind, החל את נקודת הפריצה והגדר שאילתת מדיה על כל נקודת עצירה, וגם שנה את מאפיין המיקום בנקודות עצירה שונות של המסך. פירוט ברירת המחדל הם ' sm ',' md ',' lg ', ו' xl '. בלוג זה הראה כיצד להשתמש בנקודת הפסיקה ובשאילתת המדיה עם מאפיין המיקום ב-Tailwind.