دليل تحويل وحدات CSS: شرح px و rem و em و vw و vh

اختيار وحدات CSS الصحيحة هو أحد أكثر القرارات تأثيرًا عند كتابة أوراق الأنماط. تحدد الوحدات التي تختارها كيفية تغيير حجم العناصر عبر أحجام الشاشات المختلفة، وكيفية استجابتها لتفضيلات المستخدم (مثل إعدادات حجم خط المتصفح)، والسلوك المتوقع للتخطيط. ومع ذلك، يلجأ العديد من المطورين افتراضيًا إلى البكسل بدافع العادة، مفتقدين المرونة ومزايا إمكانية الوصول التي توفرها الوحدات النسبية. يغطي هذا الدليل جميع وحدات CSS الرئيسية، ويشرح متى تستخدم كل منها، ويوضح كيفية التحويل بينها، ويقدم أفضل الممارسات العملية للتصميم المتجاوب الحديث.

فهم تصنيف وحدات CSS

تنقسم وحدات CSS إلى فئتين رئيسيتين: الوحدات المطلقة والوحدات النسبية. الوحدات المطلقة لها حجم فيزيائي ثابت، بينما تشتق الوحدات النسبية قيمتها المحسوبة من نقطة مرجعية أخرى. فهم هذا التمييز هو أساس اتخاذ خيارات وحدات مدروسة.

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

الوحدات المطلقة هي مقاييس ثابتة الحجم. الوحدة المطلقة الأكثر استخدامًا في تطوير الويب هي البكسل (px). تشمل الوحدات المطلقة الأخرى النقاط (pt) والسنتيمتر (cm) والميليمتر (mm) والبوصة (in). تُستخدم هذه الوحدات بشكل أساسي في أوراق أنماط الطباعة أو عندما تحتاج إلى قياس لا يتغير مع السياق. في CSS المعتمد على الشاشة، px هي الوحدة المطلقة الوحيدة التي ستستخدمها بانتظام.

الوحدات النسبية

تحسب الوحدات النسبية قيمتها النهائية بناءً على قيمة مرجعية. em نسبة إلى حجم خط العنصر الحالي، و rem نسبة إلى حجم خط العنصر الجذري، و vw و vh نسبة إلى أبعاد منفذ العرض، والنسب المئوية نسبة إلى العنصر الأب. الوحدات النسبية هي حجر الزاوية في التصميم المتجاوب والقابل للوصول لأنها تسمح لتخطيطك بالتكيف تلقائيًا مع السياقات المختلفة.

البكسل (px): الوحدة الأساسية

البكسل هو أكثر وحدات CSS بديهية لأنه يرتبط مباشرة ببكسلات الشاشة (مع بعض الاعتبارات المتعلقة بنسبة بكسل الجهاز). قيم px هي نفسها دائمًا بغض النظر عن السياق، مما يجعلها قابلة للتنبؤ وسهلة الفهم. ومع ذلك، فإن هذه القابلية للتنبؤ لها ثمن: الأحجام المعتمدة على البكسل لا تتغير عندما يغير المستخدم حجم الخط الافتراضي للمتصفح، مما يخلق مشكلات في إمكانية الوصول.

متى تستخدم px

• عرض الحدود: حدود 1px يجب أن تبقى 1px بغض النظر عن إعدادات حجم الخط.
• ظل الصندوق: إزاحة الظل ونصف قطر التمويه عادة ما تكون أفضل بالبكسل للحصول على تأثيرات بصرية متسقة.
• التفاصيل الدقيقة: أي قيمة يؤدي تغيير حجمها إلى إفساد التصميم البصري، مثل الفواصل الرفيعة أو تحديد موضع الأيقونات الدقيق.
• حجم الخط الجذري: تعيين html { font-size: 16px; } كخط أساس هو نمط شائع، لكن يجب عليك احترام الإعدادات الافتراضية لمتصفح المستخدم.

متى تتجنب px

تجنب استخدام px لأحجام الخطوط والحشو والهوامش وأبعاد التخطيط التي يجب أن تتكيف مع تفضيلات المستخدم. المستخدم الذي يزيد حجم خط المتصفح إلى 20px يتوقع أن يتغير حجم كل النص وفقًا لذلك، لكن أحجام الخطوط المعتمدة على px لا تستجيب لهذا التغيير.

rem: الحجم النسبي للجذر

). في معظم المتصفحات، حجم الخط الجذري الافتراضي هو 16px، لذا 1rem = 16px، 0.5rem = 8px، 2rem = 32px. الميزة الرئيسية لـ rem هي أنها تتغير عندما يغير المستخدم حجم الخط الافتراضي للمتصفح، مما يجعلها الخيار الأفضل لإمكانية الوصول.

تحويل px إلى rem

صيغة التحويل بسيطة: اقسم قيمة البكسل على حجم الخط الجذري.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

خدعة 62.5%

يجد العديد من المطورين أن القسمة على 16 مملة. خدعة شائعة هي تعيين حجم الخط الجذري إلى 62.5%، مما يجعل 1rem يساوي 10px. هذا يبسط الحساب الذهني: 14px تصبح 1.4rem، 24px تصبح 2.4rem، وهكذا.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: الحجم النسبي للسياق

وحدة em نسبة إلى حجم خط العنصر الحالي (أو للخصائص غير font-size، نسبة إلى العنصر الأب). هذا يعني أن 1em يساوي حجم الخط الحالي، وتتراكم قيم em عند تداخل العناصر. يمكن أن يكون سلوك التركيب هذا قويًا ومربكًا في نفس الوقت.

مشكلة التركيب

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

كل عنصر متداخل يضاعف حجم الخط، مما يؤدي إلى نمو أسي. لهذا السبب فإن rem عادة أفضل لأحجام الخطوط. ومع ذلك، يتألق em في حالات استخدام محددة حيث تريد تغيير حجم على مستوى المكون.

متى تستخدم em

• حشو وهوامش المكونات: عندما تريد أن يتغير التباعد مع حجم خط المكون، يحافظ em على تناسب كل شيء. إذا زدت حجم خط الزر، يتغير حجم حشوه تلقائيًا.
• نقاط توقف استعلامات الوسائط: يفضل بعض المطورين نقاط التوقف المعتمدة على em لأنها تتغير مع تفضيلات حجم خط المستخدم، مما يضمن تكيف التخطيط عند عرض المحتوى المناسب.
• حجم الأيقونات داخل المكونات: الأيقونات المقاسة بـ em تتغير بشكل متناسب مع النص المحيط.

وحدات منفذ العرض: vw و vh و vmin و vmax

وحدات منفذ العرض نسبة إلى أبعاد نافذة المتصفح. 1vw يساوي 1% من عرض منفذ العرض، و 1vh يساوي 1% من ارتفاع منفذ العرض. vmin هو الأصغر بين vw و vh، و vmax هو الأكبر. هذه الوحدات ضرورية لإنشاء تخطيطات تستجيب للمساحة المتاحة على الشاشة.

حالات استخدام شائعة لوحدات منفذ العرض

مشكلة vh في الجوال

في متصفحات الجوال، 100vh لا تساوي دائمًا ارتفاع منفذ العرض المرئي. يشغل شريط عنوان المتصفح وعناصر التحكم في التنقل مساحة، لكن 100vh تشمل المنطقة خلف هذه العناصر. هذا يتسبب في اقتطاع المحتوى أسفل المناطق ذات الارتفاع الكامل. توفر CSS الحديثة dvh (ارتفاع منفذ العرض الديناميكي) كحل، والذي يأخذ في الاعتبار أشرطة الأدوات الديناميكية. بدلاً من ذلك، استخدم JavaScript لتعيين خصائص CSS مخصصة بناءً على window.innerHeight.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

وحدات منفذ العرض الجديدة: svh و lvh و dvh

قدمت CSS ثلاث وحدات جديدة لارتفاع منفذ العرض لحل مشكلات منفذ العرض في الجوال:

• svh (ارتفاع منفذ العرض الصغير): ارتفاع منفذ العرض عندما تكون جميع واجهة متصفح المستخدم مرئية (شريط العنوان موسع).
• lvh (ارتفاع منفذ العرض الكبير): ارتفاع منفذ العرض عندما تكون واجهة متصفح المستخدم مصغرة (شريط العنوان مطوي).
• dvh (ارتفاع منفذ العرض الديناميكي): ارتفاع منفذ العرض الحالي، يتغير مع توسع أو طي واجهة متصفح المستخدم.

توجد نفس المتغيرات الصغيرة/الكبيرة/الديناميكية للعرض (svw و lvw و dvw) ووحدات min/max (svmin و lvmin و dvmin إلخ). استخدم dvh للتخطيطات ذات الشاشة الكاملة في الجوال، و svh عندما تحتاج إلى ضمان ظهور المحتوى بدون تمرير، و lvh عندما تريد ملء أقصى مساحة ممكنة.

استخدام ()clamp للطباعة المرنة

دالة ()clamp في CSS هي طفرة في الطباعة المتجاوبة. تقبل ثلاث قيم: الحد الأدنى والقيمة المفضلة والحد الأقصى. يختار المتصفح القيمة المفضلة لكنه يقيدها بين الحد الأدنى والحد الأقصى.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

يمنحك هذا النهج فوائد التغيير بناءً على منفذ العرض دون خطر أن يصبح النص صغيرًا جدًا على الجوال أو كبيرًا جدًا على سطح المكتب. يلغي الحاجة إلى نقاط توقف استعلامات الوسائط لأحجام الخطوط، مما يقلل بشكل كبير من تعقيد CSS.

جدول مرجعي للتحويل

استخدم هذا الجدول كمرجع سريع للتحويلات الشائعة. تفترض جميع القيم حجم خط جذري 16px ومنفذ عرض 1920x1080.

أفضل ممارسات وحدات CSS

• استخدم rem لأحجام الخطوط: هذه هي القاعدة الأكثر أهمية. أحجام الخطوط المعتمدة على rem تحترم تفضيلات المستخدم وتتغير بشكل متسق عبر التطبيق.
• استخدم em لتباعد المكونات: يستفيد الحشو والهوامش داخل المكونات من em لأنها تتغير بشكل متناسب عندما يتغير حجم خط المكون.
• استخدم px للحدود والتفاصيل الدقيقة: القيم التي لا يجب أن تتغير مع حجم الخط (مثل حدود 1px وإزاحات الظل) يجب أن تستخدم البكسل.
• استخدم النسب المئوية لعرض التخطيط: التخطيطات المرنة تستخدم أعمدة وعروض حاويات مبنية على النسب المئوية، مما يسمح للمحتوى بالتدفق عبر أحجام الشاشات المختلفة.
• استخدم وحدات منفذ العرض للعناصر بملء الشاشة: مناطق hero والتراكبات وأي عنصر يجب أن يملأ منفذ العرض يستفيد من vh و vw.
• استخدم ()clamp للطباعة المرنة: استبدل نقاط توقف استعلامات الوسائط لأحجام الخطوط بـ ()clamp، مما ينشئ تغييرًا سلسًا بين الحد الأدنى والأقصى.
• لا تستخدم px أبدًا لتعيين font-size الجذري: استخدم دائمًا النسبة المئوية (مثل 62.5%) أو حافظ على الإعداد الافتراضي للمتصفح. التعيين بالبكسل يتجاوز تفضيلات إمكانية الوصول للمستخدم.
• كن متسقًا: اختر استراتيجية وحدات لمشروعك والتزم بها. الخلط العشوائي للوحدات يجعل قاعدة الكود أصعب في الصيانة والتصحيح.