min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น
จำกัดค่าให้อยู่ระหว่างค่าต่ำสุดและค่าสูงสุดด้วย min(), max() และรูปแบบย่อ clamp()
min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงต้องใช้ฟังก์ชันเปรียบเทียบ
ฟังก์ชันเปรียบเทียบของ CSS (min(), max(), clamp()) ช่วยให้กำหนดขนาดแบบตอบสนองตามบริบทได้โดยไม่ต้องใช้มีเดียคิวรี ทั้งยังดูเรียบง่ายและกระชับกว่าวิธีที่อิงจุดเปลี่ยนขนาด
min() — เลือกค่าที่น้อยที่สุด
min(a, b, ...) จะประเมินอาร์กิวเมนต์ทั้งหมดและใช้ค่าที่น้อยที่สุด คำว่า "ต่ำสุด" ในที่นี้หมายถึงผลลัพธ์ที่ปรากฏบนหน้าจอ หรือก็คือตัวเลือกที่ถูกจำกัดมากที่สุด
<div class="container">Container</div>max() — เลือกค่าที่มากที่สุด
max(a, b, ...) จะเลือกค่าที่มากที่สุด เพื่อรับประกันว่าจะเป็นไปตามขีดจำกัดล่างเสมอ
<p>Responsive text</p>clamp(min, preferred, max)
clamp() จำกัดค่าให้อยู่ภายในช่วงที่กำหนด ค่าที่ต้องการเป็นพิเศษ (อาร์กิวเมนต์ตรงกลาง) มักเป็นค่าแบบยืดหยุ่น ส่วนค่าต่ำสุดและค่าสูงสุดจะกำหนดขอบเขตตายตัว
<h1>Clamped Heading</h1>มาตราส่วนตัวอักษรแบบยืดหยุ่นด้วย clamp()
แทนที่การเขียนค่าทับสำหรับแต่ละจุดเปลี่ยนขนาดด้วย clamp() เพียงหนึ่งรายการต่อระดับหัวเรื่อง:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>ระยะห่างแบบยืดหยุ่นด้วย clamp()
ใช้การกำหนดขนาดแบบยืดหยุ่นกับ padding, margin และ gap ได้เช่นกัน ซึ่งเป็นเทคนิคสำคัญสำหรับการออกแบบที่อิงขนาดเนื้อหา:
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>ใช้ min() เป็นตัวจำกัดความกว้าง
รูปแบบคอนเทนเนอร์ที่เรียบง่ายที่สุด: มีความกว้าง 90% ของพื้นที่แสดงผลเสมอ แต่ไม่กว้างเกิน 1200px โดยใช้นิพจน์เดียว:
<div class="wrapper">Wrapper</div>ใช้ max() กำหนดขนาดตัวอักษรขั้นต่ำ
รับประกันว่าข้อความเนื้อหาจะไม่เล็กเกินไปบนพื้นที่แสดงผลขนาดเล็ก:
<p class="text-body">Body text that never gets too small.</p>การซ้อน min/max/clamp
สามารถซ้อนฟังก์ชันเหล่านี้เพื่อสร้างข้อจำกัดที่ซับซ้อนได้:
<div class="element">Padded element</div>ฟังก์ชันเปรียบเทียบใน Grid
ใช้ min() ภายใน minmax() เพื่อกำหนดขีดจำกัดล่างของคอลัมน์ให้ปลอดภัยยิ่งขึ้น:
<div class="grid"><div>Card</div></div>การรองรับของเบราว์เซอร์
ฟังก์ชันเปรียบเทียบทั้งสามตัวรองรับอย่างสมบูรณ์ในเบราว์เซอร์สมัยใหม่ (Chrome 79+, Firefox 75+, Safari 11.1+) ไม่จำเป็นต้องใช้คำนำหน้าสำหรับผู้ผลิต
ตรวจสอบอย่างรวดเร็ว
หัวเรื่องใช้ font-size: clamp(1rem, 3vw, 2.5rem) ที่ความกว้างของพื้นที่แสดงผลเท่าใดที่ 3vw จะเท่ากับ 1rem (โดยสมมติให้รากมีขนาด 16px)
สรุปทบทวน
min() เลือกค่าที่น้อยกว่า (ขีดจำกัดบน) ส่วน max() เลือกค่าที่มากกว่า (ขีดจำกัดล่าง) และ clamp(min, preferred, max) จำกัดค่าแบบยืดหยุ่นให้อยู่ในขอบเขตที่กำหนด ทั้งหมดนี้ช่วยสร้างตัวอักษรและระยะห่างแบบยืดหยุ่นโดยไม่ต้องใช้มีเดียคิวรี รูปแบบที่ทรงพลังที่สุดคือ clamp(1.5rem, 4vw, 3rem) สำหรับหัวเรื่องที่ตอบสนองตามขนาดโดยอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- calc() สำหรับการคำนวณแบบไดนามิก
- min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น
- repeat() และ minmax() ในกริด
- color-mix() และไวยากรณ์สีแบบสัมพัทธ์