النتائج مقدَّمة لأغراض إعلامية فقط وقد تحتوي على أخطاء. يُرجى التحقق من المعلومات المهمة بشكل مستقل. استخدام هذه الأداة على مسؤوليتك الخاصة.
ماذا تفعل هذه الأداة
تحوّل أداة تحويل وحدات CSS الطول بين px وrem وem وpt و%. أدخل قيمة، واختر وحدتها، واضبط حجم الخط الأساسي (16px افتراضيًا، وهو ما تستخدمه المتصفحات ما لم يغيّره المستخدم)، فتعرض الصفحة الطول نفسه بالوحدات الخمس جميعها.
تتبع التحويلات مواصفات CSS: 1rem يساوي حجم خط الجذر، لذا فإن 1.5rem يساوي 24px عندما يكون الأساس 16px. والنقطة تساوي 1/72 من البوصة، والبكسل في CSS يساوي 1/96 منها، لذا فإن 12pt يساوي 16px. وهنا تُحسب em و% نسبةً إلى الأساس نفسه، وهو ما يطابق حجم خط مضبوطًا على عنصر يستخدم أصله حجم الجذر. ولا يغادر أي شيء متصفحك.
متى تستخدمها
- تحويل قيم البكسل من نموذج تصميم (mock-up) إلى
remليتغير حجم النص مع إعدادات الخط لدى المستخدم. - تحويل ورقة أنماط للطباعة أو تصميم PDF محدد بالنقاط.
- التحقق من القيمة الفعلية لحجم خط بوحدة
%عندما ترث CSS كتبه شخص آخر. - بناء سلّم طباعي (type scale) تحتاج فيه كل درجة إلى قيمة
remنظيفة.
مثال عملي
المدخلات
24px، الأساس 16pxالمخرجات
px 24.000
rem 1.5000
em 1.5000
pt 18.000
% 150.00%أسئلة حول هذه الأداة
هل أستخدم rem أم px لأحجام الخطوط؟
استخدم rem لأحجام الخطوط ولمعظم المسافات. فعندما يكبّر شخص ما حجم الخط الافتراضي في متصفحه لتسهيل القراءة، تكبر قيم rem معه، بينما تبقى قيم px ثابتة.
ما الفرق بين rem وem؟
تكون rem دائمًا نسبةً إلى حجم خط الجذر (html). أما em فنسبةً إلى حجم خط العنصر الحالي، لذا تتضاعف القيم في العناصر المتداخلة: 1.2em داخل 1.2em يساوي 1.44 ضعف الأساس. ويحسب المحوّل كلتيهما نسبةً إلى الأساس الذي تدخله.
لماذا لا يساوي 1pt القيمة 1px؟
تثبّت CSS البوصة عند 96 بكسل، والنقطة تساوي 1/72 من البوصة، لذا فإن 1pt يساوي 1.333px. وبالتالي فإن النص بحجم 12 نقطة في معالج النصوص يساوي في حجمه نصًا بحجم 16px على الويب.
ما حجم الأساس الذي يجب أن أدخله؟
استخدم 16 ما لم تضبط ورقة الأنماط لديك حجم جذر مختلفًا، مثل html { font-size: 62.5%; }، الذي يجعل الأساس 10px. أدخل القيمة التي يُحسب بها حجم خط العنصر html فعليًا.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.