RFS

RFS дегеніміз не?

Bootstrap компаниясының бүйірлік жобасы RFS - бұл бастапқыда қаріп өлшемдерін өзгерту үшін әзірленген өлшемді өзгерту механизмі (осыған байланысты оның жауапты қаріп өлшемдері аббревиатурасы). marginҚазіргі уақытта RFS көптеген CSS сипаттарын , padding, border-radius, немесе тіпті сияқты бірлік мәндерімен қайта масштабтауға қабілетті box-shadow.

Механизм браузерді қарау терезесінің өлшемдеріне негізделген сәйкес мәндерді автоматты түрде есептейді. Ол жауапты масштабтау әрекетін қосу үшін және көру порты бірліктерінің calc()араласуы бар функцияларға жинақталады.rem

RFS пайдалану

Миксингтер Bootstrap ішіне кіреді және Bootstrap-ті қосқаннан кейін қолжетімді болады scss. Қажет болса , RFS дербес орнатылуы мүмкін .

Микстерді қолдану

Миксиннің , , , , , , , , , және rfs()стенографиялары бар . Sass көзі және құрастырылған CSS үшін төмендегі мысалды қараңыз.font-sizemarginmargin-topmargin-rightmargin-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;
  }
}

Кез келген басқа сипатты 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 репозиторийінен табуға болады .