สูตรสำหรับขนาดฟอนต์แบบ Responsive

 (jameshfisher.com)
28 คะแนน โดย xguru 2024-03-22 | 3 ความคิดเห็น | แชร์ทาง WhatsApp
  • เว็บไซต์จำนวนมาก เช่น The New York Times, Medium, Substack ใช้ breakpoint (เช่น 768px) แล้วเปลี่ยนขนาดฟอนต์ตามเกณฑ์นั้น (1.125 rem และ 1.25rem)
  • หากใช้ calc ของ CSS ก็สามารถเขียนค่าใกล้เคียงแบบนี้ได้ calc(1.0625rem + 0.2604vw)
  • ถ้าปัดค่านี้ก็สามารถเขียนเป็น 1rem + 0.25vw ได้ ดังนั้นตอนนี้ฉันจึงใช้ CSS ด้านล่างกับเว็บไซต์ส่วนใหญ่
:root {  
  font-size: calc(1rem + 0.25vw);  
}

บทความที่เกี่ยวข้อง

3 ความคิดเห็น

 
yanggitak 2024-03-25

หากต้องการให้ implement ได้เหมือนกับดีไซน์ต้นฉบับบน PC ทุกประการ ผมคิดว่าน่าจะต้องใส่ css variable สำหรับหักความกว้างของสกrolบาร์เข้าไปในสูตรด้วย เพราะเข้าใจว่า vw อ้างอิงจากความกว้างที่รวมความกว้างของสกrolบาร์ไว้แล้ว

ในกรณีที่ต้องการให้แม้แต่ระยะว่างขององค์ประกอบรอบๆ เพิ่มลดในสัดส่วนเดียวกันเหมือนภาพเต็ม ก็น่าจะลองอ้างอิงวิธีตั้งค่าฟอนต์ของเว็บไซต์ด้านล่างได้เช่นกัน สำหรับ Galaxy Fold (320px) หรือจอความละเอียดสูง ก็ดูเหมือนว่าสามารถกำหนดข้อจำกัดอย่างเหมาะสมด้วย breakpoint ได้
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
 
cometkim 2024-03-22

นี่เป็นการประมาณที่มีประโยชน์ก็จริง แต่ก็ยากที่จะใช้แทน breakpoint ที่ใช้จริงใน Fluid Typography ได้ทั้งหมด

โดยปกติ clamp(min_rem, calc_relative_vw, max_rem) จะถูกปรับใช้แตกต่างกันไปตาม breakpoint โดยอิงจากความสามารถในการอ่านของคอนเทนต์และลักษณะของคอนเทนเนอร์ ดังนั้นถ้าใช้สูตรเดียวเพื่อรองรับทั้งหมด จะทำให้รองรับ form factor ที่ไม่ทั่วไปได้ยากขึ้น

ตัวอย่างเช่น สภาพแวดล้อมอย่างหน้าต่างป๊อปอัปของ Android, มอนิเตอร์ 21:9 หรือ HMD
 
nemorize 2024-03-23

ไม่ค่อยรู้เรื่องพวก Android popup หรือ HMD เท่าไหร่นะ..
แต่พวกอัตราส่วนอย่าง 21:9 ถ้าเอา vh มาผูกใช้ด้วยก็น่าจะโอเคไหม?
ประมาณ calc(1rem + min(1vw, 1vh) * 0.25) แบบนี้ครับ