RFS
يوسع محرك تغيير حجم Bootstrap بشكل مستجيب خصائص CSS الشائعة للاستفادة بشكل أفضل من المساحة المتاحة عبر منافذ العرض والأجهزة.
ما هو 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 الخاص به .