आरएफएस

आरएफएस क्या है?

बूटस्ट्रैप का साइड प्रोजेक्ट RFS एक इकाई आकार बदलने वाला इंजन है जिसे शुरू में फ़ॉन्ट आकार (इसलिए उत्तरदायी फ़ॉन्ट आकार के लिए इसका संक्षिप्त नाम) का आकार बदलने के लिए विकसित किया गया था। आजकल RFS अधिकांश CSS गुणों को इकाई मान जैसे margin, padding, border-radius, या यहां तक ​​कि पुनर्विक्रय करने में सक्षम है box-shadow।

तंत्र स्वचालित रूप से ब्राउज़र व्यूपोर्ट के आयामों के आधार पर उपयुक्त मानों की गणना करता है। calc()प्रतिक्रियाशील स्केलिंग व्यवहार को सक्षम करने के लिए इसे मिश्रित remऔर व्यूपोर्ट इकाइयों के साथ कार्यों में संकलित किया जाएगा ।

आरएफएस का उपयोग करना

मिश्रण बूटस्ट्रैप में शामिल होते हैं और जब आप बूटस्ट्रैप के 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()यदि संपत्ति को पुनर्विक्रय करने की आवश्यकता है, तो मान का द्रव संस्करण लौटाता है।

इस उदाहरण में, हम केवल ब्रेकपॉइंट के नीचे स्टाइल लागू करने के लिए बूटस्ट्रैप के अंतर्निहित उत्तरदायी ब्रेकप्वाइंट मिक्सिन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 एक अलग परियोजना है। RFS और इसके कॉन्फ़िगरेशन के बारे में अधिक जानकारी इसके GitHub रिपॉजिटरी पर पाई जा सकती है ।