Loading blog post…
Loading…
Intrinsic web design, CSS container queries และ fluid typography ผ่าน clamp() — เทคนิคสมัยใหม่ที่แทนที่ตรรกะ breakpoint ที่เปราะบางด้วย layout ที่ตอบสนองตามธรรมชาติต่อขนาดหน้าจอหรือบริบท component ใด ๆ
โมเดล breakpoint — กำหนดสามหรือสี่ความกว้างของหน้าจอ ใช้กฎ CSS ที่แตกต่างกันในแต่ละจุด — ให้บริการเว็บได้ค่อนข้างดีเมื่อภูมิทัศน์อุปกรณ์จำกัดอยู่ที่เดสก์ท็อปและมือถือ วันนี้ผู้ใช้เข้าถึงผลิตภัณฑ์ดิจิทัลบนหน้าจอที่มีช่วงตั้งแต่โทรศัพท์ที่มีหน้าจอ 320 พิกเซลไปจนถึงจอภาพ 4K
CSS container queries ซึ่งปัจจุบันรองรับในทุกเบราว์เซอร์หลัก แก้ไขความหงุดหงิดที่คงอยู่ที่สุดอย่างหนึ่งในการออกแบบ responsive: components ที่ต้องปรับให้เข้ากับความกว้างของ container แทนที่จะเป็นความกว้างของ viewport
Fluid typography ที่ implement ผ่าน CSS `clamp()` สร้างขนาด type ที่ค่อย ๆ เปลี่ยนระหว่างค่าต่ำสุดและสูงสุดเมื่อความกว้าง viewport เปลี่ยนแปลง — ขจัดการเปลี่ยนแปลงแบบขั้นบันไดที่น่าหงุดหงิดของ type scales ที่ใช้ breakpoint
