आरएफएस के बा

आरएफएस का होला?

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

ई तंत्र ब्राउजर व्यूपोर्ट के आयाम के आधार पर उचित मान सभ के गणना स्वचालित रूप से करे ला। एकरा के रिस्पांसिव स्केलिंग व्यवहार के सक्षम बनावे खातिर आ व्यूपोर्ट यूनिट के calc()मिश्रण वाला फंक्शन में संकलित कइल जाई ।rem

आरएफएस के इस्तेमाल करत बानी

मिक्सिन बूटस्ट्रैप में शामिल बा आ एक बेर रउरा बूटस्ट्रैप के शामिल कइला का बाद उपलब्ध हो जाई scss. जरूरत पड़ला पर आरएफएस के स्टैंडअलोन भी इंस्टॉल कइल जा सकेला।

मिक्सिन के इस्तेमाल करत बानी

rfs()मिक्सिन में , , , , , , , , , , आ font-size, के आशुलिपि बा । स्रोत सास आ संकलित सीएसएस खातिर नीचे दिहल उदाहरण देखल जाय।marginmargin-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);
}

फंक्शन के इस्तेमाल करत बानी

जब रउआँ includes के इस्तेमाल ना करे के चाहत बानी त दू गो फंक्शन भी बा:

• 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 आ ओकर कॉन्फ़िगरेशन के बारे में अउरी जानकारी एकर GitHub रिपोजिटरी पर मिल सकेला .