RFS

តើ RFS ជាអ្វី?

គម្រោងចំហៀងរបស់ Bootstrap RFS គឺជាម៉ាស៊ីនផ្លាស់ប្តូរទំហំឯកតាដែលត្រូវបានបង្កើតឡើងដំបូងដើម្បីផ្លាស់ប្តូរទំហំពុម្ពអក្សរ (ហេតុដូច្នេះហើយបានជាអក្សរកាត់របស់វាសម្រាប់ទំហំពុម្ពអក្សរដែលឆ្លើយតប)។ សព្វថ្ងៃ RFS មានលទ្ធភាពធ្វើមាត្រដ្ឋានឡើងវិញនូវលក្ខណៈសម្បត្តិ CSS ភាគច្រើនជាមួយនឹងតម្លៃឯកតាដូចជា margin, padding, border-radiusឬសូម្បីតែ box-shadow.

យន្តការគណនាដោយស្វ័យប្រវត្តិនូវតម្លៃសមស្របដោយផ្អែកលើវិមាត្រនៃច្រកចូលកម្មវិធីរុករក។ វានឹងត្រូវបានចងក្រងជា calc()មុខងារដែលមានផ្នែកចម្រុះ remនិងច្រកចូលមើល ដើម្បីបើកដំណើរការមាត្រដ្ឋានដែលឆ្លើយតប។

ការប្រើប្រាស់ RFS

mixins ត្រូវបានរួមបញ្ចូលនៅក្នុង Bootstrap ហើយអាចរកបាននៅពេលដែលអ្នកបញ្ចូល Bootstrap scss។ RFS ក៏អាចត្រូវ បានដំឡើងតែម្នាក់ឯង ប្រសិនបើចាំបាច់។

ការប្រើប្រាស់ល្បាយ

rfs()mixin មានអក្សរកាត់សម្រាប់ , 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()mixin ដូចនេះ:

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

!importantក៏អាចត្រូវបានបន្ថែមទៅតម្លៃអ្វីដែលអ្នកចង់បាន៖

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

ការប្រើប្រាស់មុខងារ

នៅពេលដែលអ្នកមិនចង់ប្រើ រួមបញ្ចូល ក៏មានមុខងារពីរផងដែរ៖

• rfs-value()បំប្លែងតម្លៃទៅជា remតម្លៃមួយ ប្រសិនបើ pxតម្លៃត្រូវបានឆ្លងកាត់ ក្នុងករណីផ្សេងទៀត វាត្រឡប់លទ្ធផលដូចគ្នា។
• rfs-fluid-value()ត្រឡប់​កំណែ​វត្ថុរាវ​នៃ​តម្លៃ ប្រសិនបើ​អចលនទ្រព្យ​ត្រូវ​ការ​ការ​ធ្វើ​មាត្រដ្ឋាន​ឡើងវិញ។

ក្នុងឧទាហរណ៍នេះ យើងប្រើការលាយបញ្ចូល ចំណុចឈប់ឆ្លើយតប ដែលមានស្រាប់របស់ Bootstrap ដើម្បីអនុវត្តតែរចនាប័ទ្មខាងក្រោម 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 គឺជាគម្រោងដាច់ដោយឡែកមួយនៅក្រោមអង្គការ Bootstrap ។ ព័ត៌មានបន្ថែមអំពី RFS និងការកំណត់រចនាសម្ព័ន្ធរបស់វាអាចរកបាននៅលើ ឃ្លាំង GitHub របស់វា ។