RFS

Нәрсә ул RFS?

Bootstrap ягы проекты - RFS - шрифт зурлыкларын үзгәртү өчен эшләнгән берәмлек размеры. Бүгенге көндә 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_ Sass чыганагы һәм тупланган CSS өчен түбәндәге мисалны карагыз.padding-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;
  }
}

Башка теләсә нинди милек 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 складында табып була .