أداة وحدات CSS
جرّب بنفسك
الإعدادات
CSS الناتج
:root { font-size: 16px; }✅ تم النسخ
المعاينة
عنوان تجريبي
هذا نص لتجربة الوحدات المرنة. جرّب تغيير الوحدة والقيمة وشاهد الفرق.
rem يتأثر بحجم الخط الأساسي، بينما vw يتأثر بعرض الشاشة
وحدات القياس في CSS
كل حجم في CSS — خطّ، هامش، عرض — يحتاج وحدة. واختيار الوحدة الصحيحة هو الفرق بين تصميم يتكسّر على الجوال وتصميم ينساب على كل شاشة. الوحدات نوعان: ثابتة (كالبكسل) ونسبية (تتغيّر تبعًا لشيء آخر).
المبتدئ يستعمل البكسل في كل شيء، فيبني تصميمًا جامدًا. والمحترف يخلط: البكسل حيث يجب أن يثبت، والوحدات النسبية حيث يجب أن يتكيّف.
🔑 اربطها بشيء تعرفه
البكسل كالمسطرة الثابتة: 16px تعني 16px دائمًا. أمّا em وrem و% فكالنسب: "نصف حجم الأب"، "ضعف الخط الأساسي" — تتغيّر حين يتغيّر مرجعها، فتجعل تصميمك مرنًا.
متى تستخدمها؟
px — للحدود والتفاصيل الدقيقة
حين تريد حجمًا ثابتًا لا يتغيّر: حدّ 1px، ظلّ خفيف.
rem — لأحجام الخطوط
مرتبطة بالخط الأساسي للصفحة، فتحترم تكبير المستخدم للخط.
% — للعروض والتخطيط
نسبة من عرض الأب، تتكيّف مع الحاوية تلقائيًا.
vw / vh — للأقسام الكاملة
نسبة من عرض/ارتفاع الشاشة: قسم بطول الشاشة كاملًا.
الوحدات الأساسية
| الخاصية | ماذا تفعل؟ | قيم شائعة |
|---|---|---|
| px | بكسل ثابت لا يتغيّر. | 16px / 1px |
| rem | نسبة إلى خط جذر الصفحة (html). | 1rem = 16px |
| em | نسبة إلى خط العنصر الأب. | 1.5em |
| % | نسبة إلى القيمة المقابلة في الأب. | 50% / 100% |
| vw | نسبة من عرض نافذة العرض. | 100vw / 50vw |
| vh | نسبة من ارتفاع نافذة العرض. | 100vh |
مثال عملي
خلط ذكيّ للوحدات في بطاقة:
.card {
width: 90%; /* نسبة من الأب - يتكيّف */
max-width: 400px; /* لكن لا يتجاوز حدًّا ثابتًا */
padding: 1.5rem; /* يحترم خط الصفحة */
border: 1px solid; /* حدّ دقيق ثابت */
font-size: 1rem;
}لاحظ الجمع بين 90% (مرن) وmax-width:400px (سقف ثابت): البطاقة تتمدّد على الجوال وتتوقّف عند حدّ مريح على الشاشات الكبيرة.
أخطاء شائعة
- 1. استعمال px لأحجام الخطوط: يتجاهل تكبير المستخدم للخط في المتصفّح — مشكلة وصولية حقيقية. استعمل
rem. - 2. الخلط بين
emوrem:emيتراكم مع التداخل (عنصر داخل عنصر يكبر مضاعفًا)، وremثابت المرجع دائمًا (خط الجذر). - 3. استعمال
vhبلا حذر على الجوال: شريط المتصفّح المتحرّك يغيّر الارتفاع الفعلي فيقفز التخطيط.
كيف تستفيد من الأداة أعلاه؟
حرّك مؤشّر الحجم في الأداة أعلاه وبدّل الوحدة بين px وrem و% وvw، وراقب كيف يستجيب العنصر لكلٍّ منها عند تغيير حجم الحاوية أو الشاشة.
أسئلة شائعة
em نسبة إلى خط العنصر الأب (فيتراكم عند التداخل)، وrem نسبة إلى خط جذر الصفحة دائمًا (فيبقى ثابت المرجع). لأحجام الخطوط، rem أكثر أمانًا.