وحدات القياس في تصميم الويب
August 2 2025
المقدمة
في تصميم واجهات الويب، تُعد وحدات القياس عنصرًا أساسيًا في تحديد أحجام العناصر وتنسيق توزيعها عبر الشاشات المختلفة. فهي تُستخدم لضبط المسافات، الخطوط، الأحجام، والهوامش بطريقة دقيقة ومنظمة. وتنقسم وحدات القياس في الويب إلى نوعين رئيسيين: وحدات ثابتة ووحدات نسبية، ولكل منها استخداماته وخصائصه التي تؤثر بشكل مباشر على مرونة التصميم واستجابته لمختلف الأجهزة.
أولا وحدات ثابتة
الوحدات الثابتة هي وحدات لا تتغير بتغير حجم الشاشة أو إعدادات المستخدم، وتُستخدم لتحديد أبعاد دقيقة وثابتة للعناصر في صفحة الويب، مثل px (البكسل).
- البكسل (px): هي وحدة قياس ثابتة تُستخدم لتحديد أحجام دقيقة للعناصر، مثل الصور، الإطارات، وأحجام الخطوط. ورغم أنها تمنح المصمم تحكمًا مباشرًا في الأبعاد، إلا أنها لا تتكيف تلقائيًا مع اختلاف أحجام الشاشات أو إعدادات المستخدم، ما يجعلها أقل ملاءمة للتصميم المتجاوب (Responsive Design). لذلك، يُفضل عدم الاعتماد عليها بشكل مفرط، خاصة في التصاميم التي تستهدف أجهزة متعددة الأحجام.
ثانيا وحدات نسبية
الوحدات النسبية هي وحدات تتغير تلقائيًا حسب حجم العنصر الأب أو حجم الشاشة، وتُستخدم لجعل التصميم مرنًا ومتجاوبًا، ومن أمثلتها: %، em، rem، vw، vh.
-
% (النسبة المئوية): تُستخدم لتحديد الأبعاد أو المسافات كجزء نسبي من العنصر الحاوي (الأب). على سبيل المثال، إذا تم تحديد عرض عنصر بـ 50%، فسيشغل هذا العنصر نصف عرض العنصر الأب. وتُعد هذه الوحدة مفيدة جدًا في تصميم التخطيطات المتجاوبة، حيث يمكن للعناصر التكيّف تلقائيًا مع حجم الشاشة.
-
em: هي وحدة نسبية تعتمد على حجم الخط للعنصر الأب. فإذا كان حجم الخط للعنصر الأب 16px، فإن 1em تعادل 16px. وتُستخدم em كثيرًا في تحديد الهوامش (margin) والتباعد الداخلي (padding) لجعل التصميم أكثر مرونة.
ملاحظة: استخدام em بشكل متداخل قد يؤدي إلى نتائج غير متوقعة، لأن كل مستوى من العناصر قد يورّث حجم خط مختلف. -
rem (Root em): على عكس em، تعتمد وحدة rem على حجم الخط للجذر (العنصر
<html>)، بغض النظر عن تسلسل العناصر. وهذا يجعل rem أكثر استقرارًا وأسهل في التحكم عند تصميم واجهات متجاوبة. فمثلًا، إذا كان حجم الخط للجذر 16px، فإن 1rem = 16px دائمًا، بغض النظر عن مكان استخدامه. -
vw (Viewport Width): تعتمد على عرض نافذة العرض (Viewport)، حيث تُمثّل 1vw ما يعادل 1% من عرض نافذة المتصفح. هذه الوحدة مفيدة في تصميم العناصر التي يجب أن تتكيف مع حجم الشاشة أفقيًا، مثل الصور أو العناوين الكبيرة في الصفحات.
-
vh (Viewport Height): تمثل 1% من ارتفاع نافذة العرض. وتُستخدم في تصميم عناصر مثل الأقسام (sections) التي تملأ الشاشة عموديًا، أو الخلفيات التي تُغطي كامل الصفحة الأولى.
الخاتمة
اختيار وحدة القياس المناسبة يُعد من العوامل المهمة لنجاح التصميم وملاءمته لمختلف الأجهزة. فبينما توفر الوحدات الثابتة تحكمًا دقيقًا، تتيح الوحدات النسبية مزيدًا من المرونة والتجاوب. لذلك، يوصى دائمًا باستخدام مزيج ذكي من النوعين حسب الحاجة، مع التركيز على الوحدات النسبية لجعل التصميم أكثر استجابة وسهولة في التعديل لاحقًا.