RFS

რა არის RFS?

Bootstrap-ის გვერდითი პროექტი RFS არის ერთეულის ზომის შეცვლის ძრავა, რომელიც თავდაპირველად შეიქმნა შრიფტის ზომის შესაცვლელად (აქედან გამომდინარე, მისი აბრევიატურა Responsive Font Sizes). დღესდღეობით RFS-ს შეუძლია CSS თვისებების უმეტესობის გადაანგარიშება ერთეულის მნიშვნელობებით, როგორიცაა margin, padding, border-radiusან თუნდაც box-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()მიქსს შემდეგნაირად:

.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 საცავში .