شرح صفوف ومحتوى الفقرة
تضم شاشات الهواتف الحديثة أكثر من ألف نقطة ضوئية فيزيائية في عرض قبضة اليد؛ ولو طابق البكسل الواحد في الكود نقطة فيزيائية واحدة لأصبحت حروف حجم 16px مجهرية لا تُرى. لذلك تعتمد CSS على البكسل المنطقي المرجعي مقسوماً على نسبة كثافة الشاشة DPR؛ فهاتف شاشته الفيزيائية 1170px بكثافة ثلاثية يمنح المتصفح عرضاً منطقياً مريحاً قدره 390px.
وتوفر اللغة وحدات مرتبطة بنافذة العرض مباشرة مثل vw و vh، إضافةً إلى الوحدتين الحديثتين svh و dvh اللتين تضبطان ارتفاع الواجهة بدقة مع ظهور أو اختفاء شريط عنوان متصفح الهاتف أثناء التمرير.
CSS
.hero-stage {
box-sizing: border-box;
width: 100%;
min-height: 80dvh;
padding: 24px;
background-color: #f2ebf9;
}