RFS
ម៉ាស៊ីនផ្លាស់ប្តូរទំហំរបស់ Bootstrap ធ្វើមាត្រដ្ឋានលក្ខណៈ CSS ទូទៅដើម្បីប្រើប្រាស់កន្លែងទំនេរដែលមាននៅលើច្រកចូលមើល និងឧបករណ៍ឱ្យកាន់តែប្រសើរឡើង។
តើ 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 របស់វា ។