الوحدات والقياسات — تصميم CSS

الوحدات والقياسات

width: 50% أم 20rem أم 320px؟ اختيار الوحدة يحدد كيف يتصرف تصميمك عند تغيير حجم الشاشة أو حجم الخط.

الوحدات المطلقة: px

px ثابت تقريباً (بكسل CSS، ليس بكسل الشاشة الفعلي). جيد للأشياء الصغيرة الدقيقة: سماكة الحدود 1px، الظلال، أنصاف الأقطار الصغيرة.

الوحدات النسبية للخط: rem و em

| الوحدة | نسبةً إلى | مثال (أساس 16px) |

|---|---|---|

| rem | حجم خط الجذر <html> | 1.5rem = 24px دائماً |

| em | حجم خط العنصر نفسه (أو أبيه لخاصية font-size) | يتغير حسب السياق |

html { font-size: 100%; }     /* = إعداد المتصفح، 16px افتراضياً */
h1 { font-size: 2rem; }       /* 32px — ويكبر إذا كبّر المستخدم الخط */
.btn {
    font-size: 1rem;
    padding: 0.5em 1em;       /* الحشو يتناسب مع خط الزر */
}
.btn.large { font-size: 1.25rem; }   /* الحشو يكبر معه تلقائياً بفضل em */

⚠️ لماذا لا px للخطوط؟ المستخدم الذي ضبط متصفحه على خط أكبر (ضعف البصر) يتجاهل موقعك إعداده إذا كتبت font-size: 16px على html. مع rem يحترمه.

⚠️ فخ em المتداخلة: li { font-size: 0.9em; } مع قوائم متداخلة: كل مستوى أصغر من سابقه (0.9 × 0.9 × 0.9...). لهذا rem أكثر أماناً للخطوط، و em ممتازة للحشو والهوامش المرتبطة بخط العنصر.

النسبة المئوية %

نسبةً إلى الأب، لكن إلى أي بُعد؟ يعتمد على الخاصية:

- width: 50% ← نصف عرض الأب.

- padding و margin بالنسبة المئوية ← من عرض الأب حتى للأعلى والأسفل (مفاجأة شائعة).

- height: 50% ← يعمل فقط إذا كان للأب ارتفاع محدد.

وحدات النافذة: vw و vh

| الوحدة | المعنى |

|---|---|

| 1vw | 1% من عرض النافذة |

| 1vh | 1% من ارتفاع النافذة |

| svh / lvh / dvh | ارتفاع النافذة الصغير/الكبير/الديناميكي (للجوال) |

⚠️ على الجوال 100vh قد يكون أطول من الشاشة المرئية (شريط العنوان يظهر ويختفي). استخدم min-height: 100dvh للأقسام بملء الشاشة.

⚠️ width: 100vw يسبب تمريراً أفقياً عندما يظهر شريط التمرير الرأسي (يحسبه ضمن العرض). استخدم 100%.

ch: لطول السطر

1ch ≈ عرض حرف "0". max-width: 65ch يحد الفقرة بنحو 65 حرفاً — الطول المريح للقراءة.

الدوال: calc و min و max و clamp

.main { width: calc(100% - 240px); }               /* حساب بوحدات مختلفة (مسافات حول - و + إلزامية) */
.container { width: min(100% - 32px, 1100px); }    /* الأصغر: لا يتجاوز 1100 ولا الشاشة */
.sidebar { width: max(200px, 25%); }               /* الأكبر: لا أقل من 200px */
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }  /* بين حد أدنى وأقصى، ويتغير مع الشاشة */

clamp(أدنى، مفضّل، أقصى) تصنع خطوطاً ومسافات مرنة بلا media queries. اجعل القيمة المفضلة تجمع rem مع vw (مثل 1rem + 3vw) كي يبقى التكبير يعمل.

دليل سريع

| الحالة | الوحدة المقترحة |

|---|---|

| حجم الخط | rem (أو clamp) |

| حشو الأزرار والمكونات | em أو rem |

| عرض الحاويات | %، max-width بـ rem، min() |

| طول سطر النص | ch |

| أقسام بملء الشاشة | dvh |

| الحدود والظلال | px |

تمرين

حوّل كل الأحجام في صفحتك من px إلى الوحدات المقترحة، واجعل عنوان البطل بـ clamp. ثم غيّر حجم خط المتصفح من الإعدادات إلى "كبير جداً" وتأكد أن الصفحة تكبر بشكل متناسق.

:root {
    /* لا نكتب px هنا: نحترم إعداد المستخدم */
    font-size: 100%;
}

body {
    font-size: 1rem;
    line-height: 1.7;
}

/* عنوان مرن: بين 1.75rem و 3rem حسب عرض الشاشة */
h1 {
    font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

/* حاوية: لا تتجاوز 1100px ولا الشاشة (مع 16px على كل جانب) */
.container {
    width: min(100% - 2rem, 1100px);
    margin-inline: auto;
}

/* طول سطر مريح */
.prose p {
    max-width: 65ch;
}

/* زر يتناسب حشوه مع خطه بفضل em */
.btn {
    font-size: 1rem;
    padding: 0.6em 1.2em;
    border: 1px solid currentColor;
    border-radius: 0.5em;
}

.btn.large {
    font-size: 1.25rem;
}

/* قسم بملء الشاشة يعمل صحيحاً على الجوال */
.hero {
    min-height: 100dvh;
    display: grid;
    place-items: center;
}

/* جانبية: لا تقل عن 200px، والمحتوى يأخذ الباقي */
.layout {
    display: grid;
    grid-template-columns: max(200px, 25%) 1fr;
    gap: 1.5rem;
}