ਆਰ.ਐਫ.ਐਸ
ਬੂਟਸਟਰੈਪ ਦਾ ਰੀਸਾਈਜ਼ਿੰਗ ਇੰਜਣ ਵਿਊਪੋਰਟਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਉਪਲਬਧ ਸਪੇਸ ਦੀ ਬਿਹਤਰ ਵਰਤੋਂ ਕਰਨ ਲਈ ਆਮ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਢੰਗ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ।
RFS ਕੀ ਹੈ?
ਬੂਟਸਟਰੈਪ ਦਾ ਸਾਈਡ ਪ੍ਰੋਜੈਕਟ RFS ਇੱਕ ਯੂਨਿਟ ਰੀਸਾਈਜ਼ ਕਰਨ ਵਾਲਾ ਇੰਜਣ ਹੈ ਜੋ ਕਿ ਸ਼ੁਰੂ ਵਿੱਚ ਫੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਰੀਸਾਈਜ਼ ਕਰਨ ਲਈ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਸੀ (ਇਸ ਲਈ ਇਸਦਾ ਸੰਖੇਪ ਰੂਪ ਜਵਾਬਦੇਹ ਫੌਂਟ ਆਕਾਰ ਲਈ)। ਅੱਜਕੱਲ੍ਹ RFS ਜ਼ਿਆਦਾਤਰ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਯੂਨਿਟ ਮੁੱਲਾਂ ਜਿਵੇਂ ਕਿ margin
, padding
, border-radius
, ਜਾਂ ਵੀ ਨਾਲ ਰੀਸਕੇਲ ਕਰਨ ਦੇ ਸਮਰੱਥ ਹੈ box-shadow
।
ਵਿਧੀ ਆਪਣੇ ਆਪ ਹੀ ਬ੍ਰਾਊਜ਼ਰ ਵਿਊਪੋਰਟ ਦੇ ਮਾਪਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਢੁਕਵੇਂ ਮੁੱਲਾਂ ਦੀ ਗਣਨਾ ਕਰਦੀ ਹੈ। ਜਵਾਬਦੇਹ ਸਕੇਲਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਇਸਨੂੰ ਵਿਊਪੋਰਟ ਯੂਨਿਟਾਂ calc()
ਦੇ ਮਿਸ਼ਰਣ ਨਾਲ ਫੰਕਸ਼ਨਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕੀਤਾ ਜਾਵੇਗਾ ।rem
RFS ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਮਿਸ਼ਰਣ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ scss
। ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ RFS ਨੂੰ ਇਕੱਲਾ ਵੀ ਸਥਾਪਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਮਿਸ਼ਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ
ਮਿਸ਼ਰਣ ਵਿੱਚ , , , , , , , , , , ਅਤੇ ਲਈ rfs()
ਸ਼ਾਰਟਹੈਂਡ ਹਨ । ਸਰੋਤ Sass ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦੇਖੋ।font-size
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-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 ਰਿਪੋਜ਼ਟਰੀ 'ਤੇ ਲੱਭੀ ਜਾ ਸਕਦੀ ਹੈ ।