23. الوحدات النسبية: Em و Rem ووحدات منفذ العرض
هذه الوحدات ضرورية لبناء مواقع ويب يسهل الوصول إليها ومتجاوبة حقاً.
3. Em (em)
وحدة em نسبية لـ حجم خط العنصر نفسه. إذا تم استخدامها في خاصية font-size ، فهي نسبية لحجم خط الأب.
- إذا كان حجم خط الأب 16px، فإن
1em= 16px. - إذا تم ضبط حجم خط العنصر على 20px، فإن
1emالمستخدمة للحشوة في ذلك العنصر هي 20px.
المشكلة (التراكم): يمكن أن تتراكم وحدات em. إذا كان الأب 1.5em (24px) والابن أيضاً 1.5em، يصبح الابن 36px، مما يؤدي إلى أحجام غير متوقعة.
4. Rem (rem - Root Em)
وحدة rem نسبية فقط لحجم خط عنصر HTML الجذري (<html>). هذا يحل مشكلة تراكم em.
- بشكل افتراضي،
1rem= 16px (افتراضي المتصفح). - إذا قام المستخدم بتغيير حجم خط المتصفح الافتراضي، فستتوسع جميع وحدات
remبشكل متناسب، مما يضمن وصولاً ممتازاً.
أفضل ممارسة: استخدم rem لأحجام الخطوط والمسافات (padding, margin) لضمان توسع كل شيء بشكل موحد.
5. وحدات منفذ العرض (vw, vh)
وحدات منفذ العرض نسبية لحجم نافذة المتصفح (منفذ العرض).
vw(Viewport Width): 1vw هو 1% من عرض منفذ العرض.vh(Viewport Height): 1vh هو 1% من ارتفاع منفذ العرض.vmin,vmax: بناءً على البعد الأصغر أو الأكبر لمنفذ العرض.
css /* سيتوسع حجم النص بسلاسة عند تغيير حجم نافذة المتصفح */ .responsive-title { font-size: 5vw; }
/* لافتة تكون دائماً بطول 70% من ارتفاع الشاشة */ .tall-banner { height: 70vh; }