หน้านี้ได้รับการแปลโดย Cloud Translation API

CSS min(), max() และ clamp()

ดูวิธีควบคุมขนาดองค์ประกอบ รักษาระยะห่างที่เหมาะสม และใช้การพิมพ์ตัวอักษรแบบไหลโดยใช้ฟังก์ชัน CSS ที่รองรับการใช้งานเหล่านี้

Una Kravets

เมื่อการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีความแตกต่างกันมากขึ้น CSS จึงพัฒนาอย่างต่อเนื่องเพื่อให้ ผู้เขียนสามารถควบคุมได้มากขึ้น min() max() และ clamp() ฟังก์ชัน ซึ่งขณะนี้สนับสนุน ในเบราว์เซอร์สมัยใหม่ทั้งหมด เป็นหนึ่งในเครื่องมือล่าสุดในการ การเขียนเว็บไซต์และแอปแบบไดนามิกและตอบสนองได้ไวขึ้น คุณใช้ตัวเลือกเหล่านี้ได้ ทำหน้าที่ควบคุมการปรับขนาดและปรับขนาดองค์ประกอบ รักษาระยะห่างระหว่าง องค์ประกอบต่างๆ ได้ และสร้างรูปแบบการพิมพ์ที่ยืดหยุ่นและลื่นไหล

ฟังก์ชันทางคณิตศาสตร์ calc(), min(), max() และ clamp() สามารถใช้นิพจน์ทางคณิตศาสตร์ที่มีการบวก (+) การลบ (-) การคูณ (*) และการหาร (/) เป็นค่าส่วนประกอบได้
ค่า CSS และหน่วยระดับ 4

การสนับสนุนเบราว์เซอร์

`min()`

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

แหล่งที่มา

`max()`

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

แหล่งที่มา

`clamp()`

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

แหล่งที่มา

การใช้งาน

คุณจะใช้ min(), max() และ clamp() ได้ทางด้านขวาของ CSS ใดก็ได้ ในตำแหน่งที่สมควร สำหรับ min() และ max() คุณต้องใส่ รายการอาร์กิวเมนต์ของค่า และเบราว์เซอร์จะกำหนดว่าค่าใดเป็น เล็กที่สุดหรือใหญ่ที่สุด ตัวอย่างเช่น ในกรณีของ width: min(1rem, 50%, 10vw) เบราว์เซอร์จะคำนวณว่าหน่วยใดหน่วยสัมพัทธ์ที่เล็กที่สุดและใช้ ค่าดังกล่าวสำหรับความกว้างขององค์ประกอบ

ฟังก์ชัน min() จะเลือกค่าต่ำสุดจากรายการตัวเลือกใน การสาธิต Codepen

ฟังก์ชัน max() ก็ทำแบบเดียวกันนี้กับค่าสูงสุด

ฟังก์ชัน max() จะเลือกค่าจากรายการตัวเลือกใน การสาธิต Codepen

หากต้องการใช้ clamp() ให้ป้อนค่า 3 ค่า ได้แก่ ค่าต่ำสุด ค่าที่เหมาะที่สุดสำหรับ และค่าสูงสุด

ฟังก์ชัน ceposit() จะเก็บค่าไว้ระหว่างค่าต่ำสุดที่ระบุและ สูงสุดในการสาธิต Codepen นี้

ฟังก์ชันเหล่านี้สามารถใช้ที่ใดก็ได้บน <length>, <frequency> อนุญาตให้ใช้ <angle>, <time>, <percentage>, <number> หรือ <integer> คุณ สามารถใช้ชิ้นงานได้ด้วยตนเอง (เหมือนใน font-size: max(0.5vw, 50%, 2rem)) โดย calc() (เช่น font-size: max(calc(0.5vw - 1em), 2rem)) หรือเขียนแล้ว (เช่น font-size: max(min(0.5vw, 1em), 2rem))

ตัวอย่างวิธีใช้ฟังก์ชันดังกล่าวมีดังนี้

ความกว้างที่สมบูรณ์แบบ

ตามที่ระบุไว้ในองค์ประกอบของการพิมพ์ รูปแบบ โดยโรเบิร์ต บริงเฮิสต์ "ข้อความตั้งแต่ 45 ถึง 75 ตัวได้รับการยกย่องอย่างกว้างขวางว่าเป็น ความยาวบรรทัดที่น่าพอใจสำหรับหน้าคอลัมน์เดียวซึ่งตั้งค่าในหน้าข้อความแบบ Serif ในขนาดข้อความ"

เพื่อให้บล็อกข้อความมีความกว้างอยู่ระหว่าง 45 ถึง 75 อักขระ ให้ใช้ clamp() และ ch (อักขระขั้นสูงแบบความกว้าง 0) หน่วย:

p {
  width: clamp(45ch, 50%, 75ch);
}

วิธีนี้จะช่วยให้เบราว์เซอร์กำหนดความกว้างของย่อหน้าได้ ซึ่งจะกำหนดความกว้างเป็น 50% โดยค่าเริ่มต้น หาก 50% เล็กกว่า 45ch ระบบจะใช้ 45ch เป็นความกว้าง แทน และถ้า 50% กว้างกว่า 75ch จะใช้ 75ch

ใช้ฟังก์ชัน camp() เพื่อตั้งค่าความกว้างต่ำสุดและสูงสุด ดูการสาธิตเกี่ยวกับ Codepen

นอกจากนี้ คุณยังสามารถแยกส่วนนี้โดยใช้เพียง min() หรือ max() ได้ด้วย หากคุณต้องการ องค์ประกอบต้องมีความกว้าง 50% เสมอ และความกว้างไม่เกิน 75ch สำหรับรายการที่ใหญ่กว่า ให้ใช้ width: min(75ch, 50%); เพื่อกำหนดขนาดสูงสุด

ใช้ฟังก์ชัน min() เพื่อตั้งค่าความกว้างสูงสุด

ในทำนองเดียวกัน คุณสามารถตั้งขนาดขั้นต่ำสำหรับข้อความที่อ่านได้ชัดเจนโดยใช้ max() เช่น width: max(45ch, 50%); ในเบราว์เซอร์นี้ เบราว์เซอร์จะเลือกตัวเลือกใดก็ได้ ค่าสูงกว่าหมายความว่าองค์ประกอบต้องมีขนาด 45ch หรือกว้างกว่า

ใช้ฟังก์ชัน max() เพื่อตั้งค่าความกว้างขั้นต่ำ

จัดการระยะห่างจากขอบ

คุณยังใช้ max() เพื่อกำหนดขนาดระยะห่างจากขอบขั้นต่ำได้ด้วย ตัวอย่างนี้มาจาก เคล็ดลับของ CSS, ซึ่งผู้อ่าน Caluã de Lacerda Pataca ได้แชร์ไอเดียว่า "ให้องค์ประกอบ ระยะห่างจากขอบเพิ่มเติมบนหน้าจอขนาดใหญ่ แต่ให้เพิ่มระยะห่างจากขอบขั้นต่ำที่ขนาดเล็กลง ขนาดหน้าจอ ซึ่งทำได้โดยใช้ calc() หรือ max() แล้วลบค่าต่ำสุด ระยะห่างจากขอบทั้ง 2 ด้านขององค์ประกอบ: calc((100vw - var(--contentWidth)) / 2), หรือ max(2rem, 50vw - var(--contentWidth) / 2) ในสไตล์ชีต ซึ่งจะมีลักษณะดังนี้

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

ตั้งค่าระยะห่างจากขอบขั้นต่ำสำหรับคอมโพเนนต์โดยใช้ฟังก์ชัน max() ดูการสาธิตเกี่ยวกับ Codepen

การพิมพ์แบบไหล

หากต้องการเปิดใช้การพิมพ์แบบไหล Mike Riethmeuller นิยมใช้เทคนิคหนึ่ง ที่ใช้ฟังก์ชัน clamp() เพื่อกำหนดขนาดแบบอักษรขั้นต่ำ ขนาดแบบอักษรสูงสุด และอนุญาตการปรับขนาดระหว่างขนาดเหล่านั้นได้

ใช้ camp() เพื่อสร้างการพิมพ์ตัวอักษรแบบไหล ดูการสาธิตเกี่ยวกับ Codepen

ก่อน clamp(), การออกแบบการปรับขนาดแบบอักษรจำเป็นต้องใช้สตริงรูปแบบที่ซับซ้อน ตอนนี้ ก็ปล่อยให้เบราว์เซอร์ทำงานให้คุณ ตั้งค่าแบบอักษรขั้นต่ำที่ยอมรับได้ ขนาด (เช่น 1.5rem สำหรับชื่อ) ขนาดสูงสุด (เช่น 3rem) และ ขนาดที่เหมาะสม (เช่น 5vw) ตอนนี้คุณมีภาพพิมพ์ที่ปรับขนาดตาม ความกว้างของวิวพอร์ตจนกว่าจะถึงค่าต่ำสุดและสูงสุดที่จำกัด โดยใช้ โค้ดน้อยมาก:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

แหล่งข้อมูลเพิ่มเติม

ภาพหน้าปกจาก @yer_a_wizard หน้าจอเปิด