मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
Check
in English

RFS

बुटस्ट्र्यापको रिसाइजिङ इन्जिनले भ्युपोर्टहरू र यन्त्रहरूमा उपलब्ध ठाउँको राम्रोसँग उपयोग गर्न सामान्य CSS गुणहरूलाई प्रतिक्रियाशील रूपमा मापन गर्दछ।

यस पृष्ठमा

RFS भनेको के हो?

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

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

RFS प्रयोग गर्दै

मिक्सिनहरू बुटस्ट्र्यापमा समावेश हुन्छन् र तपाईंले बुटस्ट्र्याप समावेश गरेपछि उपलब्ध हुन्छन् scss। आवश्यक भएमा RFS पनि स्ट्यान्डअलोन स्थापना गर्न सकिन्छ ।

मिक्सनहरू प्रयोग गर्दै

rfs()मिक्सिनमा 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()यदि गुणलाई पुन: स्केल गर्न आवश्यक छ भने मानको तरल संस्करण फर्काउँछ।

यस उदाहरणमा, हामीले बुटस्ट्र्यापको अन्तर्निर्मित उत्तरदायी ब्रेकपोइन्ट मिक्सिनहरू मध्ये एउटा प्रयोग गर्छौं केवल 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 भण्डारमा फेला पार्न सकिन्छ ।