આરએફએસ

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 રીપોઝીટરી પર મળી શકે છે .