RFS

ما هو RFS؟

مشروع RFS الجانبي لـ Bootstrap عبارة عن محرك لتغيير حجم الوحدة تم تطويره في البداية لتغيير أحجام الخطوط (ومن هنا جاء الاختصار لـ Responsive Font Sizes). في الوقت الحاضر ، RFS قادر على إعادة قياس معظم خصائص CSS بقيم وحدة مثل margin، paddingأو border-radius، أو حتى box-shadow.

تحسب الآلية تلقائيًا القيم المناسبة بناءً على أبعاد إطار عرض المتصفح. سيتم تجميعها في calc()وظائف بمزيج من remوحدات منفذ العرض لتمكين سلوك التحجيم سريع الاستجابة.

باستخدام RFS

يتم تضمين المزيجات في Bootstrap وهي متاحة بمجرد تضمين Bootstrap's scss. يمكن أيضًا تثبيت RFS بشكل مستقل إذا لزم الأمر.

باستخدام الخلطات

يحتوي rfs()mixin على اختصارات لـ 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 الخاص به .