RFS

RFS란 무엇입니까?

Bootstrap의 사이드 프로젝트 인 RFS 는 초기에 글꼴 크기를 조정하기 위해 개발된 단위 크기 조정 엔진입니다(따라서 Responsive Font Sizes의 약어). 요즘 RFS는 , , 또는 와 같은 단위 값을 사용하여 대부분의 CSS 속성을 재조정 margin할 padding수 border-radius있습니다 box-shadow.

메커니즘은 브라우저 뷰포트의 치수를 기반으로 적절한 값을 자동으로 계산합니다. 반응형 스케일링 동작을 가능하게 하기 위해 뷰포트 단위와 calc()혼합된 기능 으로 컴파일됩니다 .rem

RFS 사용

믹스인은 Bootstrap에 포함되어 있으며 Bootstrap의 scss. RFS는 필요한 경우 독립 실행형으로 설치할 수도 있습니다 .

믹스인 사용

rfs()mixin에는 font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom및 의 약어가 padding-left있습니다. 소스 Sass 및 컴파일된 CSS는 아래 예를 참조하세요.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

rfs()다른 속성은 다음 과 같이 mixin 에 전달할 수 있습니다 .

.selector {
  @include rfs(4rem, border-radius);
}

!important원하는 값에 추가할 수도 있습니다.

.selector {
  @include padding(2.5rem !important);
}

기능 사용

포함을 사용하지 않으려면 두 가지 기능도 있습니다.

• rfs-value()rem값이 전달 되면 값을 값으로 변환하고 px다른 경우에는 동일한 결과를 반환합니다.
• rfs-fluid-value()속성을 다시 조정해야 하는 경우 값의 유동 버전을 반환합니다.

이 예제에서는 Bootstrap에 내장된 반응형 중단점 믹스 인 중 하나를 사용 하여 중단점 아래에만 스타일을 적용합니다 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는 Bootstrap 조직의 별도 프로젝트입니다. RFS 및 해당 구성에 대한 자세한 내용은 GitHub 리포지토리 에서 찾을 수 있습니다 .