การออกแบบที่ปรับเปลี่ยนตามพื้นที่โฆษณา

แนวทางปฏิบัติแนะนำโดยรวม

• ใช้การค้นหา @container เพื่อสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งขับเคลื่อนด้วยคอมโพเนนต์ ซึ่งจะปรับตามขนาดของคอนเทนเนอร์หลักแทนวิวพอร์ต ดูรายละเอียดเพิ่มเติมได้ที่การจัดสไตล์ตามขนาด
• ใช้หน่วยวิวพอร์ตแบบไดนามิก (dvh, dvw) แทน vh/vw เพื่อป้องกันไม่ให้เลย์เอาต์เสียหายเมื่อองค์ประกอบ UI ของเบราว์เซอร์บนมือถือ (เช่น แถบที่อยู่) ปรากฏขึ้นหรือหายไป
• ใช้ aspect-ratio สำหรับองค์ประกอบสื่อ (เช่น <img> และ <video>) เพื่อจองพื้นที่ระหว่างการโหลดและป้องกัน Cumulative Layout Shift (CLS)

ดูข้อมูลเกี่ยวกับกลไกเลย์เอาต์เบื้องหลัง UI ที่ปรับเปลี่ยนตามอุปกรณ์ (Flexbox, ตารางกริด, หน่วยการค้นหาคอนเทนเนอร์, หน่วยวิวพอร์ต) ได้ที่เลย์เอาต์ CSS และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

แบบตัวพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์

• ควรรวมหน่วยที่สัมพันธ์กับวิวพอร์ตและหน่วยที่สัมพันธ์กับแบบอักษรใน clamp() สำหรับขนาดแบบอักษรที่ปรับขนาดตามขนาดวิวพอร์ต ขณะเดียวกันก็ต้องแน่ใจว่าขนาดแบบอักษรยังคงอยู่ในช่วงที่ต้องการ เช่น clamp(2rem, 1rem + 5vw, 4rem) ปรับสัดส่วนของหน่วยที่สัมพันธ์กับวิวพอร์ตและหน่วยที่สัมพันธ์กับแบบอักษรเพื่อควบคุมความเร็วในการเปลี่ยนแปลงขนาดแบบอักษร
• อย่าใช้ vw เพียงอย่างเดียวสำหรับขนาดแบบอักษรโดยไม่มี clamp() เนื่องจากอาจปรับขนาดข้อความให้เล็กหรือใหญ่เกินไปบนหน้าจอที่มีขนาดเล็กหรือใหญ่มาก

หากต้องการปรับขนาดประเภทและระยะห่างด้วยคอนเทนเนอร์แทนวิวพอร์ต โปรดดูการปรับขนาดแบบไหล