RFS

מה זה 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 שלו .