ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ຕົວສ້າງ CSS clamp() ຟຣີ

ສ້າງ CSS clamp() fluid ສຳລັບ typography ແລະ spacing ທີ່ responsive. ຕັ້ງ min/max size ແລະ viewport range, ເບິ່ງຕົວຢ່າງ live ແລະ ຄັດລອກ CSS ເສັ້ນດຽວ.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
ໜ່ວຍຜົນລັບ:
ຄ່າ CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind class
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
ກວ້າງ 768px → 21.9px
Aa 22px

ຂະໜາດ rendered ທີ່ viewport ຕ່າງກັນ

ກວ້າງ 375pxAa 16px
ກວ້າງ 908pxAa 24px
ກວ້າງ 1440pxAa 32px

clamp(min, preferred, max) ປັບຄ່າ fluid ຕາມ viewport ແລ້ວລັອກທີ່ຕ່ຳສຸດ ແລະສູງສຸດ. ແທນ media queries ຫຼາຍຊຸດສຳລັບ typography, spacing, ແລະຄວາມກວ້າງດ້ວຍບັນທັດດຽວ.

ການນຳໃຊ້ທົ່ວໄປ

  • ສ້າງ Fluid Responsive Typographyກະ font sizes ຢ່າງກ້ຽບ ລະຫວ່າງ mobile ແລະ desktop ໂດຍມີ one line.
  • Fluid Margins & Paddingເຮັດໃຫ້ຕາມການໄຫລ່ຂອງ spacing ຂະຫຍາຍ viewport ແລະບໍ່ກະໂດດ breakpoints.
  • ແທນ Media Queries ດ້ວຍ clamp()ຢຸດ stacks ຂອງ breakpoint overrides ໃນ single fluid value.
  • Build a Fluid Type Scaleສ້າງ consistent clamp() steps ສຳລັບ design-system type scale.
  • Fluid Hero & Display Headingsເຮັດໃຫ້ big landing-page headlines scale dramatically ແຕ່ຢ່າງປອດໄພ.

ມັນເຮັດວຽກແນວໃດ

ເຄື່ອງມືນີ້ຄິດໄລ່ຄ່າ CSS clamp() ໂດຍໃຊ້ສູດ linear interpolation ທີ່ຂຽນເອງ — ບໍ່ມີໄລບຣາຣີ, ບໍ່ມີການໄປກັບເຊີບເວີ. ທ່ານໃສ່ສອງຂະໜາດ ແລະ ສອງຄວາມກວ້າງໜ້າຈໍ; ເລກຄະນິດເຮັດວຽກທັນທີໃນບຣາວເຊີຂອງທ່ານ ແລະ ຜະລິດນິພົນ clamp() ພ້ອມພິມທັນທີພ້ອມຄ່າຕ້ອງການອີງ vw ທີ່ຂະຫຍາຍຂະໜາດ ຫຼືຊ່ອງຫວ່າງຂອງທ່ານຢ່າງນຸ້ມນວນລະຫວ່າງຈຸດແຕກຫັກເຫຼົ່ານັ້ນ.

  1. 1
    ການຄິດໄລ່ຄວາມຊັນເສັ້ນຊື່
    ເຄື່ອງມືຄິດໄລ່ຄວາມຊັນພິກເຊວຕໍ່ພິກເຊວ: (ຂະໜາດສູງສຸດ - ຂະໜາດຕ່ຳສຸດ) / (ໜ້າຈໍສູງສຸດ - ໜ້າຈໍຕ່ຳສຸດ). ຄວາມຊັນນີ້ຈາກນັ້ນຖືກແປງເປັນໜ່ວຍ vw ໂດຍການຄູນດ້ວຍ 100, ເຊິ່ງແມ່ນຫົວໃຈຂອງວິທີການຂະຫຍາຍຂະໜາດອີງໜ້າຈໍ CSS ເຮັດວຽກ.
  2. 2
    ການໄດ້ intercept
    intercept offset (ເປັນ px ຫຼື rem) ຖືກຄິດໄລ່ດັ່ງນັ້ນຟັງຊັນເສັ້ນຊື່ຕົກທີ່ຂະໜາດຕ່ຳສຸດຂອງທ່ານພໍດີຢູ່ໜ້າຈໍຕ່ຳສຸດ. ຮ່ວມກັນ, ຄວາມຊັນ ແລະ intercept ສ້າງຄ່າຕ້ອງການພາຍໃນ clamp() — ສ່ວນທີ່ຂະຫຍາຍຂະໜາດແທ້ຈິງ.
  3. 3
    ການແປງໜ່ວຍ ແລະ ການຈັດຮູບແບບຜົນອອກ
    ຖ້າທ່ານເລືອກຜົນອອກ rem, ທຸກຄ່າພິກເຊວຖືກຫານດ້ວຍຂະໜາດຟອນຮາກຂອງທ່ານທີ່ຕັ້ງໄວ້ (ຄ່າເລີ່ມຕົ້ນ 16px) ກ່ອນຖືກຂຽນເຂົ້າສະຕຣິງ clamp(). ຄລາສ Tailwind arbitrary-value ທີ່ກົງກັນຍັງຖືກຜະລິດ, ພ້ອມຊ່ອງຫວ່າງແທນທີ່ດ້ວຍຂີດລຸ່ມຕາມໄວຍາກອນ Tailwind.
  4. 4
    ຕົວຢ່າງແຖບເລື່ອນໜ້າຈໍສົດ
    ແຖບເລື່ອນຂອບເຂດໃຫ້ທ່ານເລື່ອນຈາກ 320px ຫາ 1920px ກວ້າງ. ໃນແຕ່ລະຕຳແໜ່ງ ສູດຄວາມຊັນ ແລະ intercept ດຽວກັນປະເມີນຂະໜາດ clamp ໃນເວລາຈິງ ແລະ ສະແດງຂໍ້ຄວາມຕົວຢ່າງທີ່ຂະໜາດພິກເຊວທີ່ຄິດໄລ່ນັ້ນ, ດັ່ງນັ້ນທ່ານເຫັນພຶດຕິກຳການຂະຫຍາຍຂະໜາດກ່ອນສຳເນົາຫຍັງ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🟦

ເຄື່ອງກໍາເນີດ CSS Grid

ອອກແບບ CSS grid ທາງພາບ — ຕາມຮອຍ, ຫົວໜ່ວຍ ແລະ ຊ່ອງວ່າງ — ແລະ ສຳເນົາ CSS ໄປມາ ແລະ HTML.

ລອງໃຊ້
📐

ຄວາມລະອຽດໜ້າຈໍຂອງຂ້ອຍແມ່ນເທົ່າໃດ

ເບິ່ງຄວາມລະອຽດໜ້າຈໍຂອງທ່ານໃນຮູບແບບພິກເຊວ CSS ແລະ ພິກເຊວຕົວຈິງ, ຂະໜາດໜ້າຕ່າງ, ອັດຕາສ່ວນພິກເຊວ, ຄວາມເລິກຂອງສີ, HDR, ການຮອງຮັບການສຳຜັດ ແລະ ອັດຕາຣີເຟຣຊ, ພ້ອມຄັດລອກຂໍ້ມູນທັງໝົດໄດ້.

ລອງໃຊ້
ກຳລັງນິຍົມ
✍️

ຕົວສ້າງລາຍເຊັນ

ແຕ້ມລາຍເຊັນດ້ວຍເມົາ, ນິ້ວ, ຫຼືປາກກາ, ຫຼືພິມຊື່ຂອງທ່ານດ້ວຍຟອນລາຍມື, ແລ້ວສົ່ງອອກເປັນ PNG ຫຼື SVG ໂປ່ງໃສ.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ