محول وحدات CSS

محول وحدات CSS - حاسبة px و rem و em و %

🎨 حوِّل بين وحدات CSS: البكسل (px) و rem و em والنِّسب المئوية (%) والنقاط (pt) ووحدات نافذة العرض (vw، vh). أداة أساسية لتصميم وتطوير الويب المتجاوب.

أنواع وحدات CSS

• الوحدات المطلقة: px، pt، cm، mm، in — حجم ثابت بغض النظر عن السياق
• الوحدات النسبية: rem، em، %، vw، vh — تتدرّج بناءً على العنصر الأب أو نافذة العرض
• وحدات مرتبطة بالخط: rem، em، ch، ex — تعتمد على حجم الخط
• وحدات مرتبطة بنافذة العرض: vw، vh، vmin، vmax — تعتمد على أبعاد نافذة العرض

شرح الوحدات

• px (بكسل): 1px = بكسل واحد على الجهاز. وحدة مطلقة، دقيقة لكنها غير قابلة للتدرّج.
• rem: نسبي لعنصر الجذر (html). 1rem = 16px افتراضياً.
• em: نسبي لحجم خط العنصر الأب. يمكن أن يتضاعف في العناصر المتداخلة.
• %: نسبي لخاصية العنصر الأب. 100% = نفس قيمة الأب.
• pt (نقاط): وحدة للطباعة. 1pt = 1/72 بوصة ≈ 1.333px.
• vw: 1vw = 1% من عرض نافذة العرض. 100vw = العرض الكامل.
• vh: 1vh = 1% من ارتفاع نافذة العرض. 100vh = الارتفاع الكامل.

تحويلات شائعة

• 1rem = 16px (إعداد المتصفح الافتراضي)
• 1em = 16px (إذا كان الأب 16px)
• 100% = حجم العنصر الأب
• 12pt = 16px (شائع في الطباعة)
• 1vw = 19.2px (على نافذة عرض 1920px)

طريقة 62.5%

اضبط html { font-size: 62.5%; } لجعل 1rem = 10px. هذا يُسهّل الحسابات: 1.6rem = 16px، 2.4rem = 24px، إلخ.

اعتبارات إمكانية الوصول

• استخدم rem للخطوط: يحترم تفضيلات حجم الخط في المتصفح
• تجنب px للخطوط: لا يتدرّج مع إعدادات المستخدم
• استخدم وحدات نسبية: يجعل التصميم متوافقاً مع التكبير/التقريب
• اختبر بأحجام مختلفة: تحقّق عند تكبير 200% ومع إعدادات النص الكبير

التصميم المتجاوب

استخدم rem لاستعلامات الوسائط: @media (min-width: 48rem) بدلاً من 768px. هذا يضمن أن نقاط التوقف تتدرّج مع تفضيلات حجم خط المستخدم.

💡 نصيحة احترافية: أفضل ممارسة حديثة هي استخدام rem لمعظم الأحجام (الخطوط، المسافات، نقاط التوقف)، و px للحدود والتفاصيل الدقيقة، و % أو وحدات نافذة العرض للتخطيطات. وتجنّب em للمسافات لأنه قد يتضاعف بشكل غير متوقع.