ਆਰ.ਐਫ.ਐਸ

RFS ਕੀ ਹੈ?

ਬੂਟਸਟਰੈਪ ਦਾ ਸਾਈਡ ਪ੍ਰੋਜੈਕਟ RFS ਇੱਕ ਯੂਨਿਟ ਰੀਸਾਈਜ਼ ਕਰਨ ਵਾਲਾ ਇੰਜਣ ਹੈ ਜੋ ਕਿ ਸ਼ੁਰੂ ਵਿੱਚ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਰੀਸਾਈਜ਼ ਕਰਨ ਲਈ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਸੀ (ਇਸ ਲਈ ਇਸਦਾ ਸੰਖੇਪ ਰੂਪ ਜਵਾਬਦੇਹ ਫੌਂਟ ਆਕਾਰ ਲਈ)। ਅੱਜਕੱਲ੍ਹ RFS ਜ਼ਿਆਦਾਤਰ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਯੂਨਿਟ ਮੁੱਲਾਂ ਜਿਵੇਂ ਕਿ margin, padding, border-radius, ਜਾਂ ਵੀ ਨਾਲ ਰੀਸਕੇਲ ਕਰਨ ਦੇ ਸਮਰੱਥ ਹੈ box-shadow।

ਵਿਧੀ ਆਪਣੇ ਆਪ ਹੀ ਬ੍ਰਾਊਜ਼ਰ ਵਿਊਪੋਰਟ ਦੇ ਮਾਪਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਢੁਕਵੇਂ ਮੁੱਲਾਂ ਦੀ ਗਣਨਾ ਕਰਦੀ ਹੈ। ਜਵਾਬਦੇਹ ਸਕੇਲਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਇਸਨੂੰ ਵਿਊਪੋਰਟ ਯੂਨਿਟਾਂ calc()ਦੇ ਮਿਸ਼ਰਣ ਨਾਲ ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕੀਤਾ ਜਾਵੇਗਾ ।rem

RFS ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਮਿਸ਼ਰਣ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ scss। ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ RFS ਨੂੰ ਇਕੱਲਾ ਵੀ ਸਥਾਪਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਮਿਸ਼ਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ

ਮਿਸ਼ਰਣ ਵਿੱਚ , , , , , , , , , , ਅਤੇ ਲਈ rfs()ਸ਼ਾਰਟਹੈਂਡ ਹਨ । ਸਰੋਤ Sass ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦੇਖੋ।font-sizemarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-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 ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਲੱਭੀ ਜਾ ਸਕਦੀ ਹੈ ।