ดูวิธีควบคุมการปรับขนาดองค์ประกอบ รักษาระยะห่างที่เหมาะสม และใช้งานการพิมพ์แบบไหลโดยใช้ฟังก์ชัน CSS ที่รองรับเป็นอย่างดีเหล่านี้
เมื่อการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีความละเอียดยิ่งขึ้น CSS จึงพัฒนาอย่างต่อเนื่องเพื่อให้ผู้เขียนควบคุมได้มากขึ้น ฟังก์ชัน min()
,
max()
และ
clamp()
ซึ่งปัจจุบันรองรับในเบราว์เซอร์ที่ทันสมัยทั้งหมดเป็นหนึ่งในเครื่องมือล่าสุดที่ทำให้การสร้างเว็บไซต์และแอปมีลักษณะแบบไดนามิกและตอบสนองได้มากขึ้น คุณสามารถใช้ฟังก์ชันเหล่านี้เพื่อควบคุมการปรับขนาดและปรับขนาดองค์ประกอบ รักษาระยะห่างระหว่างองค์ประกอบ และสร้างการออกแบบตัวอักษรที่ยืดหยุ่นและไหล
ฟังก์ชันทางคณิตศาสตร์
ค่า CSS และหน่วยระดับ 4calc()
,min()
,max()
และclamp()
สามารถใช้นิพจน์ทางคณิตศาสตร์ที่มีการบวก (+) การลบ (-), การคูณ (*) และการหาร (/) เป็นค่าองค์ประกอบ
การสนับสนุนเบราว์เซอร์
min()
max()
clamp()
การใช้งาน
คุณใช้ min()
, max()
และ clamp()
ทางด้านขวาของนิพจน์ CSS ใดก็ได้ตามความเหมาะสม สำหรับ min()
และ max()
คุณจะระบุรายการค่าอาร์กิวเมนต์ และเบราว์เซอร์จะกำหนดว่าค่าใดเล็กหรือใหญ่ที่สุด เช่น ในกรณีของ width: min(1rem, 50%, 10vw)
เบราว์เซอร์จะคํานวณหน่วยสัมพัทธ์ที่เล็กที่สุดและใช้ค่านั้นสําหรับความกว้างขององค์ประกอบ
ฟังก์ชัน max()
จะทำงานเหมือนกันเพื่อให้ได้ค่าสูงสุด
หากต้องการใช้ clamp()
ให้ป้อนค่า 3 ค่า ได้แก่ ค่าต่ำสุด ค่าที่เหมาะจะใช้คำนวณ และค่าสูงสุด
คุณสามารถใช้ฟังก์ชันเหล่านี้ได้ทุกที่ที่อนุญาต <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)
) ก็ได้
ตัวอย่างวิธีใช้ฟังก์ชันเหล่านี้มีดังนี้
ความกว้างที่พอดี
จาก The Elements of Typographic Style โดย Robert Bringhurst ว่า "อักขระตั้งแต่ 45 ถึง 75 ตัวได้รับการยกย่องอย่างกว้างขวางว่าเป็นบรรทัดความยาวที่น่าพอใจสำหรับหน้าคอลัมน์เดียวในหน้าที่มีข้อความ serif ในขนาดข้อความ"
ใช้หน่วย clamp()
และ ch
(อักขระขั้นสูง แบบ 0 ความกว้าง) เพื่อให้แน่ใจว่าบล็อกข้อความมีความกว้างอยู่ระหว่าง 45 ถึง 75 อักขระ
p {
width: clamp(45ch, 50%, 75ch);
}
ซึ่งจะช่วยให้เบราว์เซอร์กำหนดความกว้างของย่อหน้าได้ โดยกำหนดความกว้างเป็น 50% โดยค่าเริ่มต้น หาก 50% เล็กกว่า 45ch
ระบบจะใช้ 45ch
เป็นความกว้างแทน และหาก 50% กว้างกว่า 75ch
จะใช้ 75ch
นอกจากนี้ คุณยังแบ่งย่อยโดยใช้เพียง min()
หรือ max()
ได้อีกด้วย หากต้องการให้องค์ประกอบมีความกว้าง 50%
เสมอ และความกว้างไม่เกิน 75ch
ในหน้าจอที่ใหญ่ขึ้น ให้ใช้ width: min(75ch, 50%);
เพื่อตั้งค่าขนาดสูงสุด
ในทำนองเดียวกัน คุณอาจกำหนดขนาดขั้นต่ำของข้อความที่อ่านได้ชัดเจนโดยใช้ฟังก์ชัน max()
อย่างเช่นใน width: max(45ch, 50%);
ในหน้านี้ เบราว์เซอร์จะเลือกค่าที่มากกว่า ซึ่งหมายความว่าองค์ประกอบต้องยาว 45ch
ขึ้นไป
จัดการระยะห่างจากขอบ
คุณยังใช้ 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);
}
การพิมพ์แบบไหล
ในการเปิดใช้การพิมพ์แบบไหล Mike Riethmeuller ได้ทำให้เทคนิคที่ใช้ฟังก์ชัน clamp()
เป็นที่นิยมในการกำหนดขนาดแบบอักษรขั้นต่ำ ขนาดแบบอักษรสูงสุด และอนุญาตให้ปรับขนาดระหว่างขนาดเหล่านั้นได้
ก่อนวันที่ clamp(),
การออกแบบการปรับขนาดแบบอักษรต้องใช้สตริงรูปแบบที่ซับซ้อน และตอนนี้
คุณสามารถปล่อยให้เบราว์เซอร์ทำงานให้คุณแล้ว ตั้งค่าขนาดแบบอักษรขั้นต่ำที่ยอมรับได้ (เช่น 1.5rem
สำหรับชื่อหนึ่งๆ) ขนาดสูงสุด (เช่น 3rem
) และขนาดที่เหมาะสม (เช่น 5vw
) ตอนนี้คุณมีตัวอักษรที่ปรับขนาดตามความกว้างของวิวพอร์ตของหน้า จนกว่าจะถึงค่าต่ำสุดและสูงสุดที่จำกัดโดยใช้โค้ดเพียงเล็กน้อย:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
แหล่งข้อมูลเพิ่มเติม
- ค่า CSS และหน่วยใน MDN
- ค่า CSS และข้อมูลจำเพาะของหน่วยระดับ 4
- บทความเกี่ยวกับเทคนิค CSS เกี่ยวกับความกว้างขององค์ประกอบด้านใน
- min(), max(), clamp() ภาพรวมโดย Ahmad Shadeed
ภาพหน้าปกจาก @yer_a_wizard ใน Unsplash