RFS

RFS ಎಂದರೇನು?

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸೈಡ್ ಪ್ರಾಜೆಕ್ಟ್ RFS ಯುನಿಟ್ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಎಂಜಿನ್ ಆಗಿದ್ದು, ಇದನ್ನು ಆರಂಭದಲ್ಲಿ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಲು ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾಯಿತು (ಆದ್ದರಿಂದ ರೆಸ್ಪಾನ್ಸಿವ್ ಫಾಂಟ್ ಗಾತ್ರಗಳಿಗೆ ಅದರ ಸಂಕ್ಷಿಪ್ತ ರೂಪ). ಇತ್ತೀಚಿನ ದಿನಗಳಲ್ಲಿ RFS ಯುನಿಟ್ ಮೌಲ್ಯಗಳಾದ margin, padding, border-radius, ಅಥವಾ ಇನ್ನೂ ಹೆಚ್ಚಿನ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮರುಪರಿಶೀಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿದೆ box-shadow.

ಯಾಂತ್ರಿಕತೆಯು ಬ್ರೌಸರ್ ವ್ಯೂಪೋರ್ಟ್‌ನ ಆಯಾಮಗಳ ಆಧಾರದ ಮೇಲೆ ಸೂಕ್ತವಾದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಸ್ಪಂದಿಸುವ ಸ್ಕೇಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಇದು calc()ಮಿಶ್ರಣ ಮತ್ತು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಘಟಕಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳಾಗಿ ಕಂಪೈಲ್ ಮಾಡಲಾಗುತ್ತದೆ .rem

RFS ಅನ್ನು ಬಳಸುವುದು

ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ ಮತ್ತು ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸೇರಿಸಿದ ನಂತರ ಲಭ್ಯವಿರುತ್ತದೆ scss. ಅಗತ್ಯವಿದ್ದರೆ RFS ಅನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಸ್ಥಾಪಿಸಬಹುದು .

ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುವುದು

rfs()ಮಿಕ್ಸಿನ್ font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, ಮತ್ತು padding-rightಗಾಗಿ ಕಿರುಹೊತ್ತಿಗೆಗಳನ್ನು ಹೊಂದಿದೆ . ಮೂಲ ಸಾಸ್ ಮತ್ತು ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ.padding-bottompadding-left

.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 ರೆಪೊಸಿಟರಿಯಲ್ಲಿ ಕಾಣಬಹುದು .