RFS
ເຄື່ອງຈັກປັບຂະໜາດຂອງ Bootstrap ຕອບສະໜອງການປັບຂະໜາດຄຸນສົມບັດ CSS ທົ່ວໄປເພື່ອນຳໃຊ້ພື້ນທີ່ທີ່ມີຢູ່ໃນທົ່ວຊ່ອງເບິ່ງ ແລະອຸປະກອນໄດ້ດີຂຶ້ນ.
RFS ແມ່ນຫຍັງ?
ໂຄງການດ້ານຂ້າງຂອງ Bootstrap RFS ແມ່ນເຄື່ອງຈັກປັບຂະຫນາດຫນ່ວຍທີ່ພັດທະນາໃນເບື້ອງຕົ້ນເພື່ອປັບຂະຫນາດຕົວອັກສອນ (ເພາະສະນັ້ນຕົວຫຍໍ້ຂອງມັນສໍາລັບຂະຫນາດຕົວອັກສອນທີ່ຕອບສະຫນອງ). ໃນປັດຈຸບັນ RFS ສາມາດປັບປຸງຄຸນສົມບັດ CSS ສ່ວນໃຫຍ່ດ້ວຍຄ່າຫົວໜ່ວຍເຊັ່ນ margin
, padding
, border-radius
, ຫຼືແມ້ກະທັ້ງ box-shadow
.
ກົນໄກຈະຄິດໄລ່ຄ່າທີ່ເຫມາະສົມໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ຂະຫນາດຂອງ viewport ຂອງຕົວທ່ອງເວັບ. ມັນຈະຖືກລວບລວມເຂົ້າໄປໃນ calc()
ຫນ້າທີ່ທີ່ມີການປະສົມຂອງ rem
ຫນ່ວຍງານແລະ viewport ເພື່ອເຮັດໃຫ້ພຶດຕິກໍາການປັບຂະຫນາດທີ່ຕອບສະຫນອງ.
ໃຊ້ RFS
mixins ແມ່ນລວມຢູ່ໃນ Bootstrap ແລະສາມາດໃຊ້ໄດ້ເມື່ອທ່ານລວມເອົາ Bootstrap scss
. RFS ຍັງສາມາດ ຕິດຕັ້ງແບບດ່ຽວ ໄດ້ ຖ້າຕ້ອງການ.
ການນໍາໃຊ້ mixins ໄດ້
Mixin rfs()
ມີຫຍໍ້ ມາຈາກ 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 ຂອງມັນ .