RFS

RFS କ’ଣ?

ବୁଟଷ୍ଟ୍ରାପ୍ ର ସାଇଡ୍ ପ୍ରୋଜେକ୍ଟ RFS ହେଉଛି ଏକ ୟୁନିଟ୍ ରିଜାଇଜ୍ ଇଞ୍ଜିନ୍ ଯାହା ଫଣ୍ଟ ଆକାରର ଆକାର ବଦଳାଇବା ପାଇଁ ପ୍ରଥମେ ବିକଶିତ ହୋଇଥିଲା (ତେଣୁ ଏହାର ପ୍ରତିକ୍ରିୟାଶୀଳ ଫଣ୍ଟ ସାଇଜ୍ ପାଇଁ ସଂକ୍ଷିପ୍ତକରଣ) | ଆଜିକାଲି RFS , ଅଧିକାଂଶ margin, କିମ୍ବା ଏପରିକି ୟୁନିଟ୍ ମୂଲ୍ୟ ସହିତ ଅଧିକାଂଶ CSS ଗୁଣକୁ ଉଦ୍ଧାର କରିବାରେ ସକ୍ଷମ |paddingborder-radiusbox-shadow

ବ୍ରାଉଜର୍ ଭ୍ୟୁପୋର୍ଟର ପରିମାଣ ଉପରେ ଆଧାର କରି ଯନ୍ତ୍ରକ automatically ଶଳ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଉପଯୁକ୍ତ ମୂଲ୍ୟ ଗଣନା କରେ | ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍କେଲିଂ ଆଚରଣକୁ ସକ୍ଷମ କରିବାକୁ ଏହା calc()ଏକ ମିଶ୍ରଣ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ୟୁନିଟ୍ ସହିତ କାର୍ଯ୍ୟରେ ସଂକଳିତ ହେବ |rem

RFS ବ୍ୟବହାର କରିବା |

ମିଶ୍ରଣଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଏବଂ ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପରେ ଉପଲବ୍ଧ scss| ଆବଶ୍ୟକ ହେଲେ RFS ମଧ୍ୟ ଷ୍ଟାଣ୍ଡାଲୋନ ସଂସ୍ଥାପିତ ହୋଇପାରିବ |

ମିଶ୍ରଣ ବ୍ୟବହାର କରି |

ଏହି ମିଶ୍ରଣରେ ,,,,,,,,, ଏବଂ ପାଇଁ rfs()ଶୋର୍ଥାଣ୍ଡ୍ font-sizeଅଛି | _ _ _ _ _ ଉତ୍ସ ସାସ୍ ଏବଂ ସଂକଳିତ CSS ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଦେଖନ୍ତୁ |marginmargin-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;
  }
}

ଏହିପରି ଅନ୍ୟ କ 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 ସଂଗ୍ରହାଳୟରେ ମିଳିପାରିବ |