RFS

RFS ဆိုတာဘာလဲ။

Bootstrap ၏ ဘေးထွက်ပရောဂျက် RFS သည် ဖောင့်အရွယ်အစားများကို အရွယ်အစားပြောင်းလဲရန် အစပိုင်းတွင် တီထွင်ခဲ့သည့် ယူနစ်ပြန်လည်ချိန်ညှိခြင်းအင်ဂျင် (ထို့ကြောင့် ၎င်း၏အတိုကောက်စာလုံးအရွယ်အစားများအတွက်)။ marginယခုအချိန်တွင် RFS သည် CSS ၏ ဂုဏ်သတ္တိအများစုကို ၊ padding၊ border-radius၊ သို့မဟုတ်ပင် ကဲ့သို့ ယူနစ်တန်ဖိုးများဖြင့် ပြန်လည်အရွယ်တင်နိုင်ပြီဖြစ်သည် box-shadow။

ယန္တရားသည် browser viewport ၏အတိုင်းအတာများအပေါ်အခြေခံပြီးသင့်လျော်သောတန်ဖိုးများကိုအလိုအလျောက်တွက်ချက်သည်။ တုံ့ပြန်မှုစကေးချဲ့ခြင်းအပြုအမူကိုဖွင့်ရန် ၎င်းကို လုပ်ဆောင်ချက်များနှင့် မြင်ကွင်းပို့ယူနစ်များ calc()ရောနှောထားသော လုပ်ဆောင်ချက်များ အဖြစ် စုစည်းမည်ဖြစ်သည် ။rem

RFS ကိုအသုံးပြုခြင်း။

Mixins များကို Bootstrap တွင် ပါ၀င်ပြီး Bootstrap များထည့်သွင်းပြီးသည်နှင့် ရရှိနိုင်ပါသည် scss။ လိုအပ်ပါက RFS ကိုလည်း standalone တပ်ဆင် နိုင်သည်။

ရောနှောအသုံးပြုခြင်း။

rfs()Mixin တွင် , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, နှင့် padding-left. အရင်းအမြစ် Sass နှင့် compiled CSS အတွက် အောက်ပါ ဥပမာကို ကြည့်ပါ။

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

အခြားပိုင်ဆိုင်မှုမှန်သမျှကို rfs()ဤကဲ့သို့သော mixin သို့ လွှဲပြောင်းနိုင်သည်-

.selector {
  @include rfs(4rem, border-radius);
}

!importantသင်အလိုရှိသော မည်သည့်တန်ဖိုးကိုမဆို ပေါင်းထည့်နိုင်သည်။

.selector {
  @include padding(2.5rem !important);
}

လုပ်ဆောင်ချက်များကို အသုံးပြု

သင်အသုံးမပြုချင်သည့်အခါတွင် လုပ်ဆောင်ချက်နှစ်ခုလည်း ရှိပါသည်။

• rfs-value()remတန်ဖိုး တစ်ခုကို တန်ဖိုးဖြတ်သွားပါက တန်ဖိုး တစ်ခုသို့ ပြောင်းသည် px၊ အခြားကိစ္စများတွင် ၎င်းသည် တူညီသောရလဒ်ကို ပြန်ပေးသည်။
• rfs-fluid-value()ပိုင်ဆိုင်မှုကို ပြန်လည်ပြင်ဆင်ရန် လိုအပ်ပါက တန်ဖိုးတစ်ခု၏ အရည်ဗားရှင်းကို ပြန်ပေးသည်။

ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် breakpoint အောက်ရှိ စတိုင်လ် ကို အသုံးပြုရန်အတွက် Bootstrap ၏ built-in တုံ့ပြန်မှု breakpoint mixinlg များထဲမှ တစ်ခုကို အသုံးပြု ပါသည်။

.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 သည် Bootstrap အဖွဲ့အစည်းအောက်ရှိ သီးခြားပရောဂျက်တစ်ခုဖြစ်သည်။ RFS အကြောင်းနှင့်၎င်း၏ဖွဲ့စည်းပုံများကို ၎င်း၏ GitHub repository တွင် တွေ့ရှိနိုင်သည် ။