انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: وحدات القياس في لغة CSS

Classic Viewport Sizing Units وحدات نافذة العرض الكلاسيكية

أتقن وحدات القياس المطلقة والنسبية في CSS مثل px و rem و em و ch والنسب المئوية ووحدتي الجوال الحديثتين svh و dvh، وتعلّم فحص قيمها المحسوبة في المتصفح.
2 صفوف تعليمية
لغة CSS
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

بخلاف النسبة المئوية المرتبطة بالأب المباشر، تقيس وحدات نافذة العرض (Viewport Units) أبعادها مباشرةً من المساحة المرئية لنافذة المتصفح مقسمةً إلى 100 جزء متساوٍ:

  • عرض النافذة vw: تعادل 1vw نسبة 1% من عرض نافذة المتصفح؛ فالقيمة 50vw تمنح العنصر نصف عرض الشاشة دائماً.
  • ارتفاع النافذة vh: تعادل 1vh نسبة 1% من ارتفاع نافذة المتصفح المرئية.
  • الأصغر والأكبر vmin و vmax: تقيس vmin نسبةً إلى الضلع الأصغر للنافذة (العرض في الهاتف العمودي أو الارتفاع في الشاشة الأفقية)، بينما تقيس vmax نسبةً إلى الضلع الأكبر.
الصف 2 معاينة حية

جميع فقرات هذا الدرس (وحدات القياس في لغة CSS)