RFS

RFS යනු කුමක්ද?

Bootstrap හි පැති ව්‍යාපෘතිය RFS යනු අකුරු ප්‍රමාණයේ ප්‍රමාණය වෙනස් කිරීම සඳහා මුලින් සංවර්ධනය කරන ලද ඒකක ප්‍රතිප්‍රමාණකරණ එන්ජිමකි (එබැවින් එහි කෙටි යෙදුම ප්‍රතිචාරාත්මක අකුරු ප්‍රමාණයන් සඳහා වේ). වර්තමානයේ RFS හට බොහෝ CSS ගුණාංග margin, padding, border-radius, හෝ වැනි ඒකක අගයන් සමඟ නැවත පරිමාණය කිරීමේ හැකියාව box-shadowඇත.

යාන්ත්‍රණය ස්වයංක්‍රීයව බ්‍රව්සර් දර්ශන තලයේ මානයන් මත පදනම්ව සුදුසු අගයන් ගණනය කරයි. ප්‍රතිචාරාත්මක පරිමාණ හැසිරීම සක්‍රීය කිරීම සඳහා calc()එය මිශ්‍ර සහ දර්ශන ඒකක සමඟ ශ්‍රිතවලට සම්පාදනය කෙරේ .rem

RFS භාවිතා කිරීම

Mixins Bootstrap හි ඇතුළත් කර ඇති අතර ඔබ Bootstrap's ඇතුළත් කළ පසු ලබා ගත හැක scss. අවශ්ය නම් RFS ස්වාධීනව ස්ථාපනය කළ හැකිය .

මිශ්රණ භාවිතා කිරීම

rfs()Mixin හි 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 ගබඩාවෙන් සොයාගත හැකිය .