كيف أحول px إلى rem لقاعدة 16px؟

اختر بكسل (px) في من و Root EM (rem) في إلى، أدخل القيمة، واترك خط الجذر (px) عند 16. النتيجة هي القيمة مقسومة على حجم خط الجذر، لذا 24px تصبح 1.5rem.

بين أي وحدات يمكنه التحويل؟

بكسل (px)، rem، em، النقاط (pt)، vw، vh والنسبة المئوية. يتم حساب كل شيء من خلال البكسل، وتُعرض جميع النتائج السبع معًا للقيمة التي تدخلها.

لماذا تتغير نتائج em و vw و % عندما أعدل حقول السياق؟

هذه الوحدات تعتمد على مرجع. em و % تستخدمان خط الأصل (px)، vw تستخدم عرض الإطار (px)، و vh تستخدم ارتفاع الإطار (px). rem تستخدم خط الجذر (px). اضبطها لتطابق تخطيطك.

هل يمكنني تحويل ورقة أنماط كاملة من px إلى rem؟

نعم. الصق CSS في تحويل CSS المُلصق، اختر الاتجاه، وستتم إعادة كتابة كل قيمة px إلى rem بحجم الجذر الحالي، أو rem إلى px. يظهر عداد كم قيمة تغيرت.

كيف أجد صنف Tailwind المطابق لحجم ما؟

تحقق من Nearest Tailwind tokens. يسرد أقرب رمز لحجم الخط والتباعد لقيمتك بحجم الجذر الحالي، ويميز التطابقات التامة عن التقريبية.

هل هو مجاني فعلًا؟

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

هل يعمل على الجوال؟

نعم. يعمل في متصفحات الجوال الحديثة على iOS وأندرويد دون تثبيت أي شيء.

📐

محول بكسل إلى REM مجانًا

قم بالتحويل بين px وrem وem وpt وvw وvh و% بحجم خط أساسي قابل للتكوين. يتضمن جدولًا مرجعيًا لأحجام البكسل الشائعة.

يعمل في المتصفح الخاص بكبلا اشتراك، بلا نوافذ منبثقةلا يلزم تسجيل الدخولمجاني للأبد

يعمل دون اتصال بعد التحميل

من

إلى

1rem

السياق (يؤثر على rem/em/vw/vh/%)

خط الجذر (px)

خط الأصل (px)

عرض الإطار (px)

ارتفاع الإطار (px)

جميع التحويلات لـ 16 px

أقرب رموز Tailwind (عند جذر 16px)

أحجام البكسل الشائعة ← rem (بأساس 16px)

تحويل CSS المُلصق

الاستخدامات الشائعة

PX إلى REM لتطوير الويبتحويل قيم البكسل إلى وحدات rem لـ CSS قابل للتوسع وآمن. قم بتعيين حجم الخط الأساسي الخاص بك ورؤية جميع القيم المكافئة على الفور.
وحدات CSS للتصميم سريع الاستجابةتحويل بين px و vw و vh و٪ لبناء تخطيطات تستجيب بشكل صحيح لأحجام الشاشة والاتجاهات المختلفة.
تحويل مواصفات التصميم إلى وحدات CSSترجمة قيم البكسل Figma أو Sketch إلى وحدات rem/em لتطبيق CSS نظيف وقابل للتوسع.
مرجع وحدة Tailwind CSSافهم كيف تعكس فئات حجم Tailwind CSS قيم البكسل والصور لتطبيق دقيق.
تحويل وحدات CSS لأوراق نمط الطباعةتحويل بين px و pt و rem لاستعلامات الوسائط المطبوعة وCSS إخراج PDF.

كيف يعمل

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

1
اضبط قيم السياق
قبل التحويل، تضبط الأرقام الأربعة التي تجعل وحدات CSS النسبية ذات معنى: حجم الخط الجذري (الافتراضي 16px، وهو الافتراضي في المتصفح)، وحجم خط العنصر الأب (لتحويلات em و%)، وعرض نافذة العرض وارتفاعها (لـ vw وvh). وهي القيم نفسها التي يستخدمها متصفحك عند حل CSS وقت التشغيل.
2
البكسل كوسيط عالمي
يستدعي المحول أولًا toPixels() لتوحيد إدخالك إلى عدد بكسلات خام — مثلًا 1.5rem تصبح 1.5 × baseFontPx، و50vw تصبح 0.5 × vpWidth. ثم تقسم fromPixels() عدد البكسلات على المعامل المناسب للوحدة المستهدفة. وتُعرض الوحدات السبع كلها في آن واحد في جدول التحويل.
3
البحث عن أقرب رمز Tailwind
بعد التحويل، تحسب الأداة قيمة rem وتمسح جدولي بحث مضمّنين — رموز أحجام الخط الثلاثة عشر في Tailwind (من text-xs إلى text-9xl) ومقياس المسافات فيه — لإيجاد أقرب تطابق بالمسافة المطلقة. علامة = تعني أن القيمة رمز مطابق تمامًا؛ و≈ تعني أنها أقرب تقريب.
4
إعادة كتابة CSS بالجملة عبر التعبيرات النمطية
تقبل لوحة لصق CSS نص CSS خامًا وتطبق استبدالًا بتعبير نمطي: في وضع px→rem تطابق كل رمز px وتستبدل الجزء الرقمي بـ value/baseFontPx + rem؛ وفي وضع rem→px تفعل العكس. ويُعرض عدد الاستبدالات لتتحقق من عدد القيم التي أُعيدت كتابتها.