تحجيم الخطوط المتوافقة مع الشاشات (RFS)

ما هو RFS؟

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

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

استخدام RFS

المزجات (mixins) مدرجة في Bootstrap وتكون متاحة بمجرد تضمين الـ scss الخاص بـ Bootstrap. يمكن أيضاً تثبيت RFS بشكل مستقل إذا لزم الأمر.

استخدام المزجات/الدمج (mixins)

تمتلك المزج 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;
  }
}

يمكن تمرير أي خاصية أخرى إلى المزج (mixin) rfs() بهذا الشكل:

.selector {
  @include rfs(4rem, border-radius);
}

يمكن أيضاً إضافة !important ببساطة إلى أي قيمة تريدها:

.selector {
  @include padding(2.5rem !important);
}

استخدام الدوال (functions)

عندما لا ترغب في استخدام التضمينات (includes)، هناك أيضاً دالتان:

• تقوم الدالة 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 الخاص به.