محول وحدات البكسل / REM / EM (وحدات CSS)
مرشد
محول البكسل / REM / EM
قم بالتحويل فورًا بين وحدات CSS: البكسل (px) و root em (rem) و em. اضبط حجم الخط الأساسي وشاهد جميع القيم تتحدث في الوقت الفعلي. مثالي لمطوري الواجهة الأمامية الذين يترجمون مواصفات التصميم إلى CSS.
كيف تستعمل
أدخل قيمة في أي من حقول الوحدات الثلاث - px أو rem أو em - وسيتم تحديث الحقلين الآخرين على الفور. اضبط حجم الخط الأساسي (الافتراضي 16 بكسل) باستخدام شريط التمرير أو حقل الإدخال لمطابقة حجم الخط الجذر لمشروعك. يعرض جدول المراجع أدناه التحويلات الشائعة بنظرة سريعة.
سمات
- التحويل ثنائي الاتجاه – قم بتحرير px أو rem أو em وسيتم تحديث الآخرين على الفور
- حجم الخط الأساسي القابل للتعديل – يتزامن شريط التمرير والإدخال، الافتراضي 16 بكسل
- جدول المراجع – يتم حساب الأحجام الشائعة تلقائيًا لحجم خطك الأساسي
- تحديثات في الوقت الفعلي – إدخال مُقيد لتحسين الأداء
- من جانب العميل فقط – لا يتم إرسال أي بيانات إلى أي خادم
التعليمات
-
ما الفرق بين rem و em في CSS؟
rem (root em) نسبي لحجم خط العنصر الجذر (html)، مما يجعله متسقًا عبر الصفحة بأكملها. em نسبي لحجم خط العنصر الأب، والذي يمكن أن يتراكم في العناصر المتداخلة. يُفضل rem بشكل عام لاتساق التخطيط.
-
لماذا يساوي 1rem افتراضيًا 16 بكسل؟
تضبط المتصفحات حجم الخط الجذر الافتراضي على 16 بكسل ما لم يتم تجاوزه. لذا 1rem = 16px، 0.5rem = 8px، 1.5rem = 24px. إذا قمت بتعيين html { font-size: 62.5%; }، فعندئذ 1rem = 10px، مما يسهل الحسابات.
-
متى يجب أن أستخدم px بدلاً من rem أو em؟
استخدم px للقيم التي لا يجب أن تتغير مع تفضيلات خط المستخدم، مثل الحدود أو الظلال أو نقاط توقف الاستعلام عن الوسائط. استخدم rem لأحجام الخطوط والمسافات حتى يحترم تخطيطك إعدادات إمكانية الوصول للمستخدم. استخدم em لتغيير حجم المكون النسبي.
-
كيف يؤثر تكبير المتصفح على وحدات CSS؟
يقوم تكبير المتصفح بتغيير حجم جميع وحدات CSS بشكل متناسب، بما في ذلك px. هذا يختلف عن تغيير حجم النص على مستوى نظام التشغيل. ومع ذلك، إذا قام المستخدم بتغيير حجم الخط الافتراضي للمتصفح، فإن قيم rem و em تتكيف بينما لا تتكيف قيم px - مما يجعل rem/em أفضل لإمكانية الوصول.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
