RFS

RFS म्हणजे काय?

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

ब्राउझर व्ह्यूपोर्टच्या परिमाणांवर आधारित यंत्रणा स्वयंचलितपणे योग्य मूल्यांची गणना करते. प्रतिसादात्मक स्केलिंग वर्तन सक्षम करण्यासाठी ते आणि व्ह्यूपोर्ट युनिट्सच्या calc()मिश्रणासह फंक्शन्समध्ये संकलित केले जाईल .rem

RFS वापरणे

मिक्सिन्स बूटस्ट्रॅपमध्ये समाविष्ट केल्या जातात आणि एकदा तुम्ही बूटस्ट्रॅपचा समावेश केल्यावर उपलब्ध होतात 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 आणि त्याच्या कॉन्फिगरेशनबद्दल अधिक त्याच्या GitHub रेपॉजिटरीमध्ये आढळू शकते .