การปรับขนาดแบบยืดหยุ่น

ภาพรวม

การปรับขนาดแบบไหลช่วยให้คอมโพเนนต์ปรับสัดส่วนภายใน (เช่น ขนาดแบบอักษรและระยะห่าง) ตามขนาดปัจจุบันได้ ซึ่งจะทำให้การออกแบบมีความสอดคล้องกันมากกว่าการข้ามไปมาระหว่างเบรกพอยต์คงที่

แม้ว่าในอดีตจะใช้หน่วยวิวพอร์ต (การปรับขนาดตามขนาดหน้าจอ) เพื่อปรับขนาดแบบไหล แต่หน่วยการค้นหาคอนเทนเนอร์สมัยใหม่ช่วยให้คอมโพเนนต์ปรับขนาดตามคอนเทนเนอร์ระดับบนสุดแทนได้ วิธีนี้ช่วยให้มั่นใจได้ว่าคอมโพเนนต์จะดูดีไม่ว่าจะวางไว้ที่ใดในเลย์เอาต์ ซึ่งจะช่วยให้แยกคอมโพเนนต์และนำกลับมาใช้ใหม่ได้ดียิ่งขึ้น

การใช้งาน

1. กำหนดคอนเทนเนอร์

หากต้องการใช้หน่วยการค้นหาคอนเทนเนอร์ คุณต้องกำหนดบริบทการกักกันในองค์ประกอบหลักก่อน

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. ใช้หน่วยการค้นหาคอนเทนเนอร์

ใช้หน่วยการค้นหาคอนเทนเนอร์ (cqi, cqb ฯลฯ) เพื่อกำหนดขนาดที่สัมพันธ์กับขนาดของคอนเทนเนอร์

• cqi: 1% ของขนาดอินไลน์ของคอนเทนเนอร์ (ความกว้างในโหมดการเขียนแนวนอน)
• cqb: 1% ของขนาดบล็อกของคอนเทนเนอร์ (ความสูงในโหมดการเขียนแนวนอน)

หมายเหตุ: คุณใช้หน่วยคอนเทนเนอร์กับพร็อพเพอร์ตี้ได้โดยตรงโดยไม่ต้องมีกฎการค้นหา @container โดยจะแก้ไขโดยอัตโนมัติตามระดับบนสุดที่ใกล้ที่สุดซึ่งมี container-type ที่กำหนดไว้

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. จำกัดค่าด้วย clamp()

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

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

กลยุทธ์สำรอง

หากเบราว์เซอร์ไม่รองรับการค้นหาคอนเทนเนอร์ คุณควรระบุทางเลือกสำรองโดยใช้หน่วยวิวพอร์ตหรือการค้นหาสื่อมาตรฐาน

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

ซึ่งจะช่วยให้มั่นใจได้ว่าข้อความจะยังคงปรับขนาดได้ แต่จะอิงตามความกว้างของหน้าจอแทนความกว้างของคอมโพเนนต์ คุณควรทดสอบเพื่อยืนยันว่าวิธีนี้ใช้ได้กับกรณีการใช้งานของคุณ