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 репозитороос олж болно .