RFS

RFS چیست؟

پروژه جانبی Bootstrap RFS یک موتور تغییر اندازه واحد است که در ابتدا برای تغییر اندازه فونت (از این رو مخفف آن Responsive Font Sizes) ساخته شد. امروزه RFS قادر است اکثر خصوصیات CSS را با مقادیر واحد مانند،،، یا marginحتی تغییر مقیاس دهد .paddingborder-radiusbox-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()mixin منتقل کرد:

.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 آن بیابید .