ข้อมูลจอภาพ

DPR คือจำนวนพิกเซลทางกายภาพต่อพิกเซล CSS DPR 2 หมายถึงจอ Retina ภาพควรมีขนาด 2 เท่าเพื่อแสดงผลคมชัด

ความละเอียดหน้าจอคือจำนวนพิกเซลทั้งหมดของจอ ส่วน viewport คือพื้นที่แสดงเนื้อหาในเบราว์เซอร์ ไม่รวมแถบเครื่องมือและแถบเลื่อน

การผูกเบรกพอยต์ไว้กับชื่อรุ่นอุปกรณ์ เท่ากับรับประกันว่ามันจะพังทันทีที่มีเครื่องรุ่นใหม่ออกมา ให้ตัดตรงจุดที่เลย์เอาต์เองเริ่มดูผิดเพี้ยนแทน ในทางปฏิบัติ 480, 768, 1024 และ 1280 พิกเซล เป็นจุดตั้งต้นที่พบบ่อย แต่นั่นเป็นเพียงตัวเลขที่จำง่าย ไม่ใช่กฎ ให้ค่อย ๆ ลากหน้าต่างเบราว์เซอร์ให้แคบลงแล้วสังเกตว่าที่ความกว้างเท่าใดบรรทัดข้อความยาวเกินไปหรือการ์ดถูกบีบจนเสียรูป แล้ววางเบรกพอยต์ตรงนั้น จะทนทานกว่ามาก

เพราะพิกเซลของ CSS เป็นหน่วยของขนาดที่ตามองเห็น ไม่ใช่จุดทางกายภาพ บนจอ 4K ที่ตั้งการปรับสเกลไว้ที่ 200% จุดทางกายภาพ 3840 จุดจะถูกนำเสนอเป็น 1920 พิกเซลของ CSS ซึ่งนี่เองที่ทำให้ตัวอักษรและไอคอนดูละเอียดและคมขึ้น ตอนนั้นอัตราส่วนพิกเซลของอุปกรณ์จะเท่ากับ 2 ดังนั้นหากต้องการให้ภาพยังคมชัด ต้องจัดหาไฟล์ที่มีความละเอียดเป็นสองเท่าของขนาดที่แสดงผ่าน srcset ด้วย