معلومات الشاشة

DPR هو عدد البكسلات الفعلية لكل بكسل CSS. تشير قيمة DPR تساوي 2 إلى شاشة Retina، مما يعني أن الصور يجب أن تكون أكبر بمرتين للعرض الواضح.

دقة الشاشة هي إجمالي البكسلات الفعلية لشاشتك، بينما منفذ العرض هو المنطقة التي يُعرض فيها المحتوى في المتصفح، باستثناء أشرطة الأدوات وأشرطة التمرير.

ربط نقاط التوقّف بأسماء أجهزة بعينها يضمن انهيارها فور صدور جهاز جديد. اقطع بدلاً من ذلك عند النقطة التي يبدأ فيها التخطيط نفسه بالاختلال. وعملياً تُعدّ 480 و768 و1024 و1280 بكسل نقاط انطلاق شائعة، لكنها أرقام يسهل تذكّرها لا قواعد. ضيّق نافذة المتصفح ببطء وراقب العرض الذي تطول عنده أسطر النص أكثر من اللازم أو تنضغط فيه البطاقة؛ فوضع نقطة التوقّف هناك أمتن بكثير.

لأن بكسل CSS وحدة للحجم الظاهر لا نقطة فيزيائية. فعلى شاشة 4K مضبوطة على تكبير 200% تُعرض 3840 نقطة فيزيائية على أنها 1920 بكسل CSS، وهذا بالضبط ما يجعل النص والأيقونات أكثر كثافة وحدّة. وتصبح نسبة بكسل الجهاز حينئذٍ 2، فلإبقاء الصور حادّة عليك تقديم ملف بضِعف الحجم المعروض عبر srcset.