Convert from:
Converted values
px
16px
rem
1rem
em
1em
pt
12pt
%
100%
px → rem reference (base 16px)
| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Category:css
Mode:Offline
Version:1.0.0
Access:Free
ما هو محول وحدة CSS؟
يقوم محول وحدة CSS بترجمة الطول بين الوحدات التي يستخدمها CSS لتحديد الحجم والنوع والتخطيط: px، وrem، وem، وpt، و%. إنه موجود لأن التصميم الحديث سريع الاستجابة يعتمد على الوحدات النسبية - مقياس rem وem مع إعدادات حجم الخط والتكبير/التصغير للمستخدم - بينما يتم عادةً التعبير عن نماذج التصميم وأوراق الأنماط القديمة بالبكسلات الثابتة. تأخذ هذه الأداة قيمة مثل 24px وتظهرها على أنها 1.5rem و1.5em و18pt و150% في وقت واحد، وتعمل في كل اتجاه من حقل واحد.
تتوقف جميع التحويلات على رقم واحد: حجم الخط الجذر (الأساسي)، والذي يتم تعيينه افتراضيًا على 16px لأن هذا هو حجم الخط الأساسي للمتصفح. يساوي One rem دائمًا حجم الخط الأساسي، لذا عند 16px تكون القيمة 16px 1rem و24px هي 1.5rem و8px هي 0.5rem. ترتبط النقاط بالبكسل المرجعي لـ CSS - 1 بوصة تساوي 96px و72pt - لذا فإن 1pt تساوي 96/72، أي حوالي 1.333px. يتم التعامل مع النسبة المئوية كحصة من حجم الخط الأساسي، لذا فإن 100% يساوي القاعدة و50% يساوي نصفها.
كل شيء يعمل في متصفحك أثناء الكتابة ، لذلك لا يوجد تحميل ، ولا انتظار على الخادم ، ولا يوجد حد لعدد القيم التي تقوم بتحويلها. قم بتغيير حجم الخط الأساسي لنمذجة مكون يعين حجم الخط الخاص به ، واقرأ النتائج في كل وحدة ، وانسخ العنصر الذي تحتاجه. يمنحك جدول PX-to-REM المدمج مرجعًا جاهزًا للأحجام التي تظهر في معظم الأحيان في مقياس النوع.
كيفية استخدام محول وحدة CSS؟
1
أدخل قيمة واختر وحدتها
اكتب الرقم الذي تريد تحويله واختر الوحدة الموجودة حاليًا - px أو rem أو em أو pt أو %. يمكنك أيضًا لصق قيمة بوحدتها، مثل 24px، وستقرأ الأداة الوحدة لك.
2
اضبط حجم الخط الأساسي
اضبط حجم الخط الجذر إذا كان مشروعك يستخدم شيئًا آخر غير المتصفح الافتراضي 16 بكسل. يتحكم هذا في كيفية ارتباط REM و EM و٪ بالبكسل.
3
اقرأ كل وحدة في وقت واحد
يعرض المحول القيمة المكافئة في جميع الوحدات المدعومة على الفور ، لكل منها لاحقة الوحدة الخاصة به حتى تتمكن من إسقاطها مباشرة في CSS.
4
انسخ أو استخدم الجدول المرجعي
انسخ أي نتيجة بنقرة واحدة ، أو امسح الجدول المرجعي PX-to-REM للأحجام الشائعة في مقياس طباعة.
الميزات الرئيسية
كل وحدة في آن واحد
أدخل قيمة واحدة وشاهد على الفور PX و REM و EM و PT و٪ جنبًا إلى جنب ، كل منها منسق بوحدته حتى تتمكن من لصقه مباشرة في ورقة أنماط.
حجم الخط الأساسي القابل للتكوين
حجم الخط الجذر قابل للتعديل، لذا فإن تحويلات rem وem و% تتوافق مع مشروعك - سواء كنت تستخدم الإصدار الافتراضي 16px، أو خدعة 10px "62.5%"، أو حجم الخط على مستوى المكون.
ثنائي الاتجاه، أي اتجاه
لا يوجد "من" و"إلى" ثابت. قم بتحويل px إلى rem، أو rem إلى px، أو px إلى em، أو pt إلى px - أي وحدة إلى أي وحدة - من إدخال واحد.
جدول مرجعي PX-to-REM
يسرد الجدول المدمج مكافئات REM و EM و PT و٪ لأحجام البكسل التي تظهر أكثر في مقاييس النوع ، بحيث يمكنك مقلة المقياس الكامل في القاعدة التي اخترتها.
Frequently Asked Questions
قسّم قيمة البكسل على حجم الخط الجذر. في المتصفح الافتراضي البالغ 16 بكسل ، Rem = px ÷ 16 ، لذا فإن 16 بكسل هي 1 rem ، و 24 بكسل هي 1.5rem ، و 8 بكسل هي 0.5rem. أدخل قيمة البكسل في المحول ويظهر مكافئ REM على الفور بأي حجم خط أساسي قمت بتعيينه.
Related Tools
CBS
css
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CCG
css
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS
css
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CTS
css
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
px to rem converterrem to px converterpx to em convertercss unit converterpx to pt converterrem calculatorem to pxcss font size converterpixel to remresponsive font size converter