RFS
מנוע שינוי הגודל של Bootstrap משנה באופן רספונסיבי את מאפייני ה-CSS הנפוצים כדי לנצל טוב יותר את השטח הפנוי בין יציאות ומכשירים.
מה זה RFS?
הפרויקט הצדדי של Bootstrap RFS הוא מנוע לשינוי גודל יחידה שפותח בתחילה כדי לשנות גודל של גופנים (ומכאן הקיצור שלו ל- Responsive Font Sizes). כיום RFS מסוגל לשנות את קנה המידה של רוב מאפייני ה-CSS עם ערכי יחידה כמו margin
, padding
, border-radius
, או אפילו box-shadow
.
המנגנון מחשב אוטומטית את הערכים המתאימים בהתבסס על מידות התצוגה של הדפדפן. זה יורכב calc()
לפונקציות עם שילוב של rem
יחידות נקודת מבט כדי לאפשר את התנהגות קנה המידה המגיב.
שימוש ב-RFS
המיקסים כלולים ב-Bootstrap וזמינים ברגע שאתה כולל את ה-Bootstrap scss
. ניתן גם להתקין RFS עצמאי במידת הצורך.
בעזרת המיקסינים
למיקסין rfs()
יש קיצורים של font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
ו padding-left
. ראה את הדוגמה למטה עבור מקור Sass ו-CSS מהול.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
כל תכונה אחרת יכולה לעבור rfs()
למיקסין כך:
.selector {
@include rfs(4rem, border-radius);
}
!important
אפשר גם פשוט להוסיף לכל ערך שתרצו:
.selector {
@include padding(2.5rem !important);
}
שימוש בפונקציות
כאשר אינך רוצה להשתמש בכלול, יש גם שתי פונקציות:
rfs-value()
ממירה ערךrem
לערך אםpx
ערך מועבר, במקרים אחרים הוא מחזיר את אותה תוצאה.rfs-fluid-value()
מחזירה את הגרסה הנוזלית של ערך אם המאפיין זקוק לשינוי קנה מידה.
בדוגמה זו, אנו משתמשים באחד משילובי נקודת השבירה המובנים של Bootstrap כדי להחיל רק סגנון מתחת לנקודת הפריצה lg
.
.selector {
@include media-breakpoint-down(lg) {
padding: rfs-fluid-value(2rem);
font-size: rfs-fluid-value(1.125rem);
}
}
@media (max-width: 991.98px) {
.selector {
padding: calc(1.325rem + 0.9vw);
font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
}
}
תיעוד מורחב
RFS הוא פרויקט נפרד תחת ארגון Bootstrap. עוד על RFS והתצורה שלו ניתן למצוא במאגר GitHub שלו .