أداة وحدات CSS

اختيار الوحدة الصحيحة في CSS يفرّق بين تصميم مرن وتصميم جامد. فبين px الثابتة وrem المرنة والنِّسب المئوية ووحدات الشاشة (vw/vh)، لكلٍّ موضعها المناسب. وكثير من مشاكل التجاوب سببها استخدام وحدة في غير محلّها.

هذه الأداة تتيح لك تجربة كل وحدة على عنصر حقيقي ومقارنة سلوكها مباشرة، لتفهم الفرق بالتجربة لا بالحفظ.

جرّب بنفسك

الإعدادات

الوحدة

القيمة

حجم الخط الأساسي (للـ rem)

CSS الناتج

:root { font-size: 16px; }

المعاينة

عنوان تجريبي

هذا نص لتجربة الوحدات المرنة. جرّب تغيير الوحدة والقيمة وشاهد الفرق.

rem يتأثر بحجم الخط الأساسي، بينما vw يتأثر بعرض الشاشة

متى تستخدم هذه الخاصية؟

افهم الوحدات جيدًا عندما تريد تصميمًا يتكيّف ويحترم تفضيلات المستخدم:

rem لأحجام الخطوط لتحترم إعدادات المستخدم
% وvw/vh للعروض والارتفاعات المرنة
px للحدود والتفاصيل الدقيقة الثابتة

نصيحة من الخبرة: تجنّب px لأحجام الخطوط، واجعل rem عادتك فيها — فهي أفضل لإمكانية الوصول.

أمثلة عملية

مثال: مقارنة الخط الثابت بالمرن.

.fixed { font-size: 16px; }   /* ثابت دائمًا */
.flexible { font-size: 1rem; } /* يتكيّف مع إعداد المستخدم */

بدّل بين الوحدات في الأداة بالأعلى وكبّر خط المتصفح لترى أيّها يستجيب وأيّها يبقى ثابتًا.