محوّل وحدات CSS

حوّل طول CSS بين px وrem وem وpt و% وvw وvh.

جارٍ تحميل الأداة…

محوّل وحدات CSS — حوّل قيمة طول CSS واحدة إلى px وrem وem وpt و% وvw وvh دفعة واحدة. اضبط حجم الخط الجذري وحجم خط العنصر الأب وعرض وارتفاع منطقة العرض، ثم اكتب قيمة واختر وحدتها لترى كل المكافئات على الفور. يتم حساب كل شيء داخل متصفحك، لذا لا يُرفع أي شيء تكتبه إلى أي مكان.

ما هي محوّل وحدات CSS؟

محوّل وحدات CSS أداة مجانية تعمل داخل المتصفح وتترجم طول CSS واحدًا إلى سبع وحدات شائعة: px وrem وem وpt و% وvw وvh. يستخدمه مطورو الواجهة الأمامية ومصممو الويب لنقل تخطيط بين وحدات البكسل المطلقة والوحدات المتجاوبة، وللتحقق من عدد البكسلات التي يساويها rem ضمن حجم خط جذري مخصص، أو لتحويل قيمة pt بأسلوب الطباعة إلى بكسلات الشاشة. ولأن rem يعتمد على حجم الخط الجذري، وem و% يعتمدان على حجم خط العنصر الأب، وvw/vh يعتمدان على منطقة العرض، يعرض المحوّل الأربعة جميعها كإعدادات قابلة للتعديل. اكتب قيمة، واختر وحدة المصدر، وتتحدّث كل حقول النتائج في آن واحد. يسرد مقتطف CSS الجاهز للّصق كل المكافئات السبعة كتصريحات font-size.

كيفية استخدام محوّل وحدات CSS

  1. افتح الإعدادات واضبط حجم الخط الجذري (حجم خط html الذي يعتمد عليه rem)، وحجم خط العنصر الأب (المستخدَم لـ em و%)، وعرض وارتفاع منطقة العرض (المستخدَمين لـ vw وvh).
  2. اكتب الرقم الذي تريد تحويله في حقل القيمة.
  3. اختر وحدة المصدر من قائمة "من" المنسدلة: px أو rem أو em أو pt أو % أو vw أو vh.
  4. اقرأ كل مكافئ في حقول النتائج المعنونة للقراءة فقط؛ تُعاد جميعها للحساب تلقائيًا عند تغيير القيمة أو الوحدة أو أي إعداد.
  5. انسخ مقتطف CSS المُولَّد للصق المكافئات السبعة لـ font-size مباشرةً في ورقة الأنماط الخاصة بك.

أمثلة

px إلى rem عند جذر 16

المدخل

الجذر 16px، القيمة 16، من px

المخرج

rem = 1

rem إلى px عند جذر 10

المدخل

الجذر 10px، القيمة 2، من rem

المخرج

px = 20

px إلى pt

المدخل

القيمة 16، من px

المخرج

pt = 12

الأسئلة الشائعة

بين أي وحدات يحوّل؟
سبع وحدات طول في CSS: px وrem وem وpt و% وvw وvh. يمكن أن تكون أي منها هي المصدر، وتُعرض المكافئات السبعة جميعها في الوقت نفسه.
لماذا يجب أن أضبط أحجام الجذر والأب ومنطقة العرض؟
هذه الوحدات نسبية. فـ rem هو مضاعف لحجم الخط الجذري (html)، وem و% نسبيان إلى حجم خط العنصر الأب، وvw/vh نسبتان مئويتان من عرض وارتفاع منطقة العرض. ضبط هذه القيم في الإعدادات يُخبر المحوّل بما تُترجَم إليه كل وحدة نسبية.
كيف تُعالَج pt؟
يعرّف CSS أن 96px = 1in = 72pt، لذا فإن 1pt يساوي 4/3 px و1px يساوي 0.75pt. يستخدم المحوّل هذه النسبة الثابتة، بصرف النظر عن حجم الخط أو منطقة العرض.
ماذا يحدث إذا كانت قيمة أو إعداد غير صالح؟
إذا لم تكن القيمة عددًا منتهيًا، أو إذا كان أيٌّ من أحجام الجذر أو الأب أو منطقة العرض مفقودًا أو صفرًا أو سالبًا، تعرض حقول النتائج شَرطة (—) حتى تُدخل أرقامًا صالحة.
هل يُرسَل أي شيء إلى خادم؟
لا. تُنفَّذ كل عمليات التحويل بالكامل من جهة العميل داخل متصفحك دون أي رفع ودون استدعاءات للخادم، لذا فإن القيم التي تُدخلها لا تغادر جهازك أبدًا.

أدوات ذات صلة

حاسبة نسبة العرض إلى الارتفاع

أدخل العرض أو الارتفاع مع نسبة عرض إلى ارتفاع مستهدفة لتحصل فورًا على البُعد المطابق إضافةً إلى النسبة المبسطة.

محوّل أنظمة الأعداد

حوّل الأعداد بين الثنائي والثماني والعشري والست عشري.

محوّل ملفات Base64

رمّز أي ملف أو صورة إلى Base64 data URI، وفُكّ ترميز data URI لاستعادته كملف قابل للتنزيل.

حاسبة مؤشر كتلة الجسم

احسب مؤشر كتلة جسمك من الطول والوزن بالوحدات المترية أو الإمبراطورية واطّلع فورًا على فئة الوزن المطابقة وفق منظمة الصحة العالمية.