آر ايف ايس

RFS ڇا آهي؟

بوٽ اسٽريپ جي سائڊ پروجيڪٽ RFS هڪ يونٽ ريزائزنگ انجڻ آهي جنهن کي شروعاتي طور تي فونٽ جي سائز کي ريسائيز ڪرڻ لاءِ تيار ڪيو ويو هو (تنهنڪري ان جو مخفف Responsive font sizes لاءِ). اڄڪلهه آر ايف ايس اڪثر سي ايس ايس پراپرٽيز کي يونٽ ويلز جهڙوڪ margin, padding, border-radius, or even سان ٻيهر اسڪيل ڪرڻ جي قابل آهي box-shadow.

ميکانيزم خودڪار طريقي سان حساب ڪري ٿو مناسب قدرن جي بنياد تي برائوزر ويوپورٽ جي طول و عرض جي بنياد تي. اهو جوابي اسڪيلنگ رويي کي چالو ڪرڻ لاءِ ملاحظه ۽ ويوپورٽ يونٽن calc()سان گڏ افعال ۾ مرتب ڪيو ويندو .rem

RFS استعمال ڪندي

ميڪسين بوٽ اسٽريپ ۾ شامل ڪيا ويا آهن ۽ دستياب آهن جڏهن توهان بوٽ اسٽريپ کي شامل ڪيو scss. جيڪڏهن گهربل هجي ته آر ايف ايس پڻ اسٽينڊل نصب ٿي سگهي ٿو .

mixins استعمال ڪندي

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 ۽ ان جي تشڪيل بابت وڌيڪ ڳولهي سگھجي ٿو ان جي GitHub مخزن تي .