0Pricing
CSS Academy · บทเรียน

ฟังก์ชัน Min Max และ Clamp

ใช้ min(), max() และ clamp() เพื่อกำหนดขนาดแบบปรับตามพื้นที่บรรจุหรือพื้นที่แสดงผล

ฟังก์ชัน Min Max และ Clamp เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้ฟังก์ชันเปรียบเทียบของ CSS

ฟังก์ชันเปรียบเทียบของ CSS ช่วยให้คุณเขียน การกำหนดขนาดแบบมีเงื่อนไข ได้โดยไม่ต้องใช้ JavaScript: "ใช้ขนาดนี้ แต่ต้องไม่เล็กหรือใหญ่เกินขอบเขตเหล่านี้" ฟังก์ชันเหล่านี้เป็นหัวใจสำคัญของการออกแบบสมัยใหม่ที่ปรับขนาดลื่นไหลและตอบสนองได้ดี

ฟังก์ชัน min()

min() ส่งคืนค่าที่ เล็กที่สุด จากรายการค่าที่คั่นด้วยจุลภาค เบราว์เซอร์จะเลือกค่าที่เล็กที่สุดในขนาดวิวพอร์ตปัจจุบัน

<div class="container">Container width: min(800px, 90%)</div>

ฟังก์ชัน max()

max() ส่งคืนค่าที่ ใหญ่ที่สุด มีประโยชน์สำหรับกำหนดขนาดขั้นต่ำที่สามารถขยายใหญ่ขึ้นได้ด้วย

<p>Text sized with max(1rem, 2vw)</p>

ฟังก์ชัน clamp()

clamp(min, preferred, max) จำกัดค่าให้อยู่ระหว่างค่าขั้นต่ำและค่าสูงสุด ค่าที่ต้องการใช้มักเป็นค่าแบบลื่นไหล เช่น vw

<h1>Clamped Heading</h1>

clamp() สำหรับตัวอักษรแบบปรับตามพื้นที่

การจัดขนาดตัวอักษรแบบปรับตามพื้นที่ด้วย clamp() ช่วยลดความจำเป็นในการกำหนดขนาดตัวอักษรทับหลายค่าด้วยคิวรีสื่อ:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() สำหรับระยะห่างแบบปรับตามพื้นที่

ใช้รูปแบบเดียวกันกับระยะห่าง เพื่อให้ระยะขอบและระยะหุ้มปรับตามขนาดพื้นที่ได้อย่างเป็นธรรมชาติ:

<div class="section">Section with fluid padding</div>

min() สำหรับคอนเทนเนอร์

รูปแบบคอนเทนเนอร์ที่ปลอดภัย ซึ่งจะไม่กว้างเกินความกว้างสูงสุดและจะไม่ทำให้เกิดการเลื่อนแนวนอน:

<div class="wrapper">Safe wrapper container</div>

การซ้อนฟังก์ชัน

คุณสามารถซ้อนฟังก์ชันเปรียบเทียบเพื่อสร้างนิพจน์ที่ซับซ้อนได้:

<p class="hero-text">Nested min/max inside clamp()</p>

การใช้ calc() ร่วมกับ clamp()

ใช้ calc() ภายใน clamp() เพื่อแทรกค่าระหว่างขนาดสองค่าอย่างแม่นยำและปรับตามพื้นที่ได้:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

CSS ยังมีค่าขนาดที่เป็นคีย์เวิร์ดด้วย:

  • min-content: ขนาดเล็กที่สุดเท่าที่เป็นไปได้โดยไม่ให้เนื้อหาล้น
  • max-content: ใช้พื้นที่มากเท่าที่เนื้อหาต้องการ
  • fit-content(): คล้ายกับ max-content แต่จำกัดไว้ไม่เกินค่าที่กำหนด
<span class="tag">Tag label</span>

การรองรับของเบราว์เซอร์

min(), max() และ clamp() ได้รับการรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ไม่จำเป็นต้องใช้คำนำหน้า ฟังก์ชันเหล่านี้ใช้ได้ทุกที่ที่ต้องการค่าความยาว ความถี่ เวลา หรือจำนวน

ตรวจสอบความเข้าใจ

หัวเรื่องหนึ่งใช้ font-size: clamp(1rem, 4vw, 3rem) ในพื้นที่แสดงผลที่กว้าง 600px ตัวอักษรจะมีขนาดเท่าใด

สรุปทบทวน

min() เลือกค่าที่น้อยที่สุด ส่วน max() เลือกค่าที่มากที่สุด clamp(min, preferred, max) จำกัดค่าที่ปรับตามพื้นที่ให้อยู่ภายในขอบเขตที่กำหนด ฟังก์ชันเหล่านี้เป็นพื้นฐานของการจัดขนาดตัวอักษรและระยะห่างแบบปรับตามพื้นที่ในยุคใหม่ และมักช่วยลดความจำเป็นในการกำหนดค่าทับหลายรายการด้วยคิวรีสื่อ

คำถามที่พบบ่อย

บทเรียน “ฟังก์ชัน Min Max และ Clamp” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ฟังก์ชัน Min Max และ Clamp” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชัน Min Max และ Clamp”

ใช้ min(), max() และ clamp() เพื่อกำหนดขนาดแบบปรับตามพื้นที่บรรจุหรือพื้นที่แสดงผล คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ฟังก์ชัน Min Max และ Clamp” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. หน่วยสัมบูรณ์: px pt และ cm
  2. หน่วยสัมพัทธ์: em และ rem
  3. หน่วยพื้นที่แสดงผล: vw vh และ dvh
  4. ฟังก์ชัน Min Max และ Clamp
← กลับไปที่ CSS Academy