RFS

RFS คืออะไร?

RFSโปรเจ็กต์ด้านข้างของ Bootstrap เป็น เอ็นจิ้ นการปรับขนาดหน่วยซึ่งเริ่มแรกพัฒนาขึ้นเพื่อปรับขนาดขนาดฟอนต์ (จึงเป็นตัวย่อสำหรับขนาดฟอนต์ที่ตอบสนอง) ปัจจุบัน RFS สามารถปรับขนาดคุณสมบัติ CSS ส่วนใหญ่ด้วยค่าหน่วยเช่นmargin, padding, , หรือborder-radiusแม้แต่box-shadow

กลไกจะคำนวณค่าที่เหมาะสมโดยอัตโนมัติตามขนาดของวิวพอร์ตของเบราว์เซอร์ มันจะถูกคอมไพล์เป็นcalc()ฟังก์ชันที่ผสมผสานระหว่างremหน่วยวิวพอร์ตเพื่อเปิดใช้งานพฤติกรรมการปรับขนาดที่ตอบสนอง

การใช้ RFS

มิกซ์อินจะรวมอยู่ใน 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()มิกซ์อินได้ดังนี้:

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

!importantสามารถเพิ่มมูลค่าใดก็ได้ที่คุณต้องการ:

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

การใช้ฟังก์ชั่น

เมื่อคุณไม่ต้องการใช้การ include ก็ยังมีฟังก์ชันสองอย่าง:

• 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