RFS

RFS là gì?

Dự án phụ của Bootstrap RFS là một công cụ thay đổi kích thước đơn vị ban đầu được phát triển để thay đổi kích thước phông chữ (do đó là tên viết tắt của nó cho Kích thước phông chữ đáp ứng). Ngày nay RFS có khả năng thay đổi quy mô hầu hết các thuộc tính CSS với các giá trị đơn vị như , marginhoặc thậm chí .paddingborder-radiusbox-shadow

Cơ chế tự động tính toán các giá trị thích hợp dựa trên kích thước của khung nhìn trình duyệt. Nó sẽ được biên dịch thành calc()các hàm với sự kết hợp của remvà các đơn vị khung nhìn để cho phép hành vi mở rộng quy mô đáp ứng.

Sử dụng RFS

Các mixin được bao gồm trong Bootstrap và có sẵn sau khi bạn đưa vào Bootstrap's scss. RFS cũng có thể được cài đặt độc lập nếu cần.

Sử dụng mixin

Mixin có các viết rfs()tắt font-sizecủa ,,,,,, và . _ margin_ margin-top_ margin-right_ Xem ví dụ bên dưới về nguồn Sass và CSS đã biên dịch.margin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-left

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Bất kỳ thuộc tính nào khác có thể được chuyển đến rfs()mixin như sau:

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

!importantcũng có thể được thêm vào bất kỳ giá trị nào bạn muốn:

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

Sử dụng các chức năng

Khi bạn không muốn sử dụng bao gồm, cũng có hai chức năng:

• rfs-value()chuyển đổi một giá trị thành một remgiá trị nếu một pxgiá trị được chuyển, trong các trường hợp khác, nó trả về cùng một kết quả.
• rfs-fluid-value()trả về phiên bản linh hoạt của một giá trị nếu thuộc tính cần thay đổi tỷ lệ.

Trong ví dụ này, chúng tôi sử dụng một trong các kết hợp điểm ngắt đáp ứng được tích hợp sẵn của Bootstrap để chỉ áp dụng kiểu bên dưới lgđiểm ngắt.

.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 */
  }
}

Tài liệu mở rộng

RFS là một dự án riêng biệt thuộc tổ chức Bootstrap. Bạn có thể tìm thấy thêm về RFS và cấu hình của nó trên kho lưu trữ GitHub .