RFS
ଭ୍ୟୁପୋର୍ଟ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ ଉପଲବ୍ଧ ସ୍ଥାନକୁ ଭଲ ଭାବରେ ବ୍ୟବହାର କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ରିଜାଇଜ୍ ଇଞ୍ଜିନ୍ ସାଧାରଣ CSS ଗୁଣକୁ ମାପଚୁପ କରିଥାଏ |
RFS କ’ଣ?
ବୁଟଷ୍ଟ୍ରାପ୍ ର ସାଇଡ୍ ପ୍ରୋଜେକ୍ଟ RFS ହେଉଛି ଏକ ୟୁନିଟ୍ ରିଜାଇଜ୍ ଇଞ୍ଜିନ୍ ଯାହା ଫଣ୍ଟ ଆକାରର ଆକାର ବଦଳାଇବା ପାଇଁ ପ୍ରଥମେ ବିକଶିତ ହୋଇଥିଲା (ତେଣୁ ଏହାର ପ୍ରତିକ୍ରିୟାଶୀଳ ଫଣ୍ଟ ସାଇଜ୍ ପାଇଁ ସଂକ୍ଷିପ୍ତକରଣ) | ଆଜିକାଲି RFS , ଅଧିକାଂଶ margin
, କିମ୍ବା ଏପରିକି ୟୁନିଟ୍ ମୂଲ୍ୟ ସହିତ ଅଧିକାଂଶ CSS ଗୁଣକୁ ଉଦ୍ଧାର କରିବାରେ ସକ୍ଷମ |padding
border-radius
box-shadow
ବ୍ରାଉଜର୍ ଭ୍ୟୁପୋର୍ଟର ପରିମାଣ ଉପରେ ଆଧାର କରି ଯନ୍ତ୍ରକ automatically ଶଳ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଉପଯୁକ୍ତ ମୂଲ୍ୟ ଗଣନା କରେ | ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍କେଲିଂ ଆଚରଣକୁ ସକ୍ଷମ କରିବାକୁ ଏହା calc()
ଏକ ମିଶ୍ରଣ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ୟୁନିଟ୍ ସହିତ କାର୍ଯ୍ୟରେ ସଂକଳିତ ହେବ |rem
RFS ବ୍ୟବହାର କରିବା |
ମିଶ୍ରଣଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଏବଂ ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପରେ ଉପଲବ୍ଧ scss
| ଆବଶ୍ୟକ ହେଲେ RFS ମଧ୍ୟ ଷ୍ଟାଣ୍ଡାଲୋନ ସଂସ୍ଥାପିତ ହୋଇପାରିବ |
ମିଶ୍ରଣ ବ୍ୟବହାର କରି |
ଏହି ମିଶ୍ରଣରେ ,,,,,,,,, ଏବଂ ପାଇଁ rfs()
ଶୋର୍ଥାଣ୍ଡ୍ font-size
ଅଛି | _ _ _ _ _ ଉତ୍ସ ସାସ୍ ଏବଂ ସଂକଳିତ CSS ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଦେଖନ୍ତୁ |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;
}
}
ଏହିପରି ଅନ୍ୟ କ property ଣସି ସମ୍ପତ୍ତି ମିଶ୍ରଣକୁ ପଠାଯାଇପାରିବ rfs()
:
.selector {
@include rfs(4rem, border-radius);
}
!important
ଆପଣ ଯାହା ଚାହୁଁଛନ୍ତି ତାହା ସହିତ କେବଳ ଯୋଗ କରାଯାଇପାରିବ:
.selector {
@include padding(2.5rem !important);
}
ଫଙ୍କସନ୍ ବ୍ୟବହାର କରିବା |
ଯେତେବେଳେ ଆପଣ ଅନ୍ତର୍ଭୂକ୍ତଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁନାହାଁନ୍ତି, ସେଠାରେ ଦୁଇଟି କାର୍ଯ୍ୟ ମଧ୍ୟ ଅଛି:
rfs-value()
rem
ଯଦି ଏକ ମୂଲ୍ୟ ପାସ୍ ହୁଏ, ଏକ ମୂଲ୍ୟକୁ ଏକ ମୂଲ୍ୟରେ ରୂପାନ୍ତର କରେpx
, ଅନ୍ୟ କ୍ଷେତ୍ରରେ ଏହା ସମାନ ଫଳାଫଳ ଫେରସ୍ତ କରେ |rfs-fluid-value()
ଯଦି ସମ୍ପତ୍ତିର ପୁନ c ଉଦ୍ଧାର ଆବଶ୍ୟକ ହୁଏ ତେବେ ମୂଲ୍ୟର ତରଳ ସଂସ୍କରଣ ଫେରସ୍ତ କରେ |
ଏହି ଉଦାହରଣରେ, ଆମେ କେବଳ ବ୍ରେକପଏଣ୍ଟ ତଳେ ଷ୍ଟାଇଲିଂ ପ୍ରୟୋଗ କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ବିଲ୍ଟ-ଇନ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟ ମିଶ୍ରଣ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 ସଂଗ୍ରହାଳୟରେ ମିଳିପାରିବ |