محوّل وحدات CSS
حوّل بين px وrem وem وvw وفق حجم خط وحاوية تحددهما.
المقاسات التي تعتمد عليها الوحدات
تعتمد عليه rem. تبدأ المتصفحات بـ 16.
تعتمد عليه em و%. اتركه فارغًا لاستخدام حجم الجذر.
بكل الوحدات
اكتب مقاسًا وشاهده بكل الوحدات.
طريقة الاستخدام
- اكتب القيمة واختر وحدتها.
- غيّر حجم الخط أو أبعاد الشاشة إن لزم.
- اضغط البطاقة التي تحتاجها لنسخها.
أمثلة
- بكسل إلى rem24px بجذر 16 1.5rem
- rem إلى بكسل1rem بجذر 16 16px
- بكسل إلى vw32px بعرض 1000 3.2vw
تفاصيل الأداة والخصوصية
اكتب مقاسًا واختر وحدته، وسترى قيمته بكل الوحدات في بطاقات؛ اضغط أي بطاقة لتنسخ القيمة مع الوحدة، مثل 1.5rem.
التصميم يُسلَّم غالبًا بالبكسل، بينما تُكتب الأنماط بـ rem أو em لتتبع حجم الخط الذي يختاره القارئ.
الخيارات
- rem يعتمد على حجم خط الجذر، وem و% على خط العنصر الأب (يساوي الجذر إن تركته فارغًا).
- vw وvh تعتمدان على عرض الشاشة وارتفاعها اللذين تكتبهما.
- pt وحدة طباعة: 96px = 72pt.
الحدود
- تُقرَّب القيم إلى أربع منازل عشرية.
- تقبل الأرقام العربية والفاصلة العشرية.
الخصوصية
ما تكتبه يبقى في متصفحك. لا يُرفع شيء ولا يُحفظ على الخادم.
أسئلة
ما حجم خط الجذر الافتراضي؟
16px في معظم المتصفحات.
ما الفرق بين rem وem؟
rem من خط الجذر دائمًا، وem من خط العنصر الأب.
هل أستطيع كتابة 1٫5؟
نعم.
هل يُرفع شيء؟
لا.