كيف أقوم بتحويل REM إلى PX؟

اضرب قيمة REM في حجم الخط الجذر. عند قاعدة 16 بكسل ، PX = REM × 16 ، لذا فإن 1REM هو 16 بكسل ، و 1.5 REM 24 بكسل ، و 0.75REM هو 12 بكسل. قم بتغيير حجم الخط الأساسي في الأداة إذا كان عنصر HTML الخاص بك يستخدم قيمة مختلفة.

ما هو حجم خط الجذر الافتراضي؟

تقوم المتصفحات بتعيين عنصر HTML على 16 بكسل افتراضيًا ، وهذا هو سبب بدء هذا المحول من 16. نظرًا لأن 1REM يساوي دائمًا حجم الخط الجذر ، فإن هذا الإعداد الافتراضي يجعل 16 بكسل يساوي 1 rem بالضبط. يمكن للمستخدمين تغيير حجم النص الافتراضي للمتصفح ، وهذا أحد أسباب تفضيل حركة العين السريعة للطباعة التي يمكن الوصول إليها والقابلة للتطوير.

ما هو الفرق بين ريم و م؟

يكون rem دائمًا مرتبطًا بحجم خط الجذر (html)، لذلك يظل ثابتًا عبر الصفحة بأكملها. يرتبط em بحجم خط العنصر الحالي، لذلك يمكن أن يتضاعف عندما تحدد كل عناصر متداخلة حجمها الخاص. تفترض هذه الأداة وجود عنصر بحجم القاعدة، لذا يتطابق rem وem - اضبط حجم الخط الأساسي لنموذج سياق em محدد.

كيف يرتبط PX و PT في CSS؟

يعرّف CSS 1 بوصة على أنه 96 بكسل و 72 نقطة ، لذا فإن 1pt يساوي 96/72 1.333px ، و 1 بكسل يساوي 0.75 نقطة. تأتي النقاط من الطباعة المطبوعة؛ على الشاشة فهي مجرد مضاعف ثابت للبكسل المرجعي لـ CSS. استخدم PX أو REM لعمل الشاشة واحجز PT لأوراق أنماط الطباعة.

ماذا تفعل خدعة حجم الخط "62.5٪"؟

يؤدي ضبط حجم خط html على 62.5% إلى جعل حجم الخط الجذر 10px (62.5% من 16px)، لذلك يصبح 1rem 10px مناسبًا وتتحول رياضيات rem إلى "تحريك العلامة العشرية" - 1.6rem هو 16px، و2.4rem هو 24px. لنمذجة ذلك في المحول، قم بتعيين حجم الخط الأساسي على 10 واقرأ عمود rem.

هل يجب علي استخدام PX أو REM لأحجام الخطوط؟

يُفضل REM بشكل عام لأحجام الخطوط لأنه يتناسب مع تفضيلات حجم خط متصفح المستخدم ، مما يحسن إمكانية الوصول ، بينما لا يتم ذلك في Fixed PX. تصمم العديد من الفرق في PX وتحويلها إلى REM لـ CSS النهائي ، وهو بالضبط ما تسرع هذه الأداة. تفاصيل التخطيط مثل الحدود غالبًا ما تبقى في PX.

كيف يتم تحويل النسبة المئوية هنا؟

يتم التعامل مع النسبة المئوية كحصة من حجم الخط الأساسي ، لذا فإن 100٪ تساوي القاعدة و 50٪ يساوي نصفها. عند قاعدة 16 بكسل ، 100٪ 16 بكسل و 150٪ 24 بكسل. يتطابق هذا مع كيفية حل نسبة حجم الخط مقابل حجم المرجع.

لماذا تحتوي القيمة المحولة على عدد عشري طويل في بعض الأحيان؟

بعض التحويلات ليست دقيقة - 15 بكسل عند قاعدة 16 بكسل هو 0.9375rem، وغالبًا ما تنتج قيم pt أرقامًا عشرية متكررة. تقوم الأداة بالتقريب إلى عدد قليل من المنازل العشرية وتقليم الأصفار الزائدة لسهولة القراءة. للحصول على تخطيطات مثالية للبكسل، قم بتقريب قيم rem إلى رقمين عشريين أو ثلاثة أو اختر قاعدة تقسم أحجامك بشكل نظيف.

كيف أقوم بتحويل PX إلى EM؟

اقسم قيمة البكسل على حجم خط العنصر الذي تنطبق عليه. في سياق 16px، يعطي px 16 em، لذا فإن 24px هو 1.5em و8px هو 0.5em - وهي نفس الرياضيات مثل rem في القاعدة. الفرق هو أن em نسبة إلى العنصر الحالي، لذلك يتضاعف عندما تحدد العناصر المتداخلة حجمها الخاص؛ قم بتعيين حجم الخط الأساسي هنا لنمذجة سياق معين.

هل تم إرسال المدخلات الخاصة بي إلى الخادم؟

لا . يتم تشغيل كل تحويل في JavaScript في متصفحك ، وهذا هو سبب تحديث النتائج على كل ضغطة مفتاح بدلاً من طلب الشبكة. لا يتم إرسال أي شيء تكتبه أو تسجيله أو تخزينه ، ويستمر المحول في العمل دون اتصال بمجرد تحميل الصفحة.

مح

محول وحدة CSS

قم بالتحويل بين وحدات CSS - px وrem وem وpt و% - بحجم خط جذر قابل للتكوين وإخراج فوري لجميع الوحدات وجدول مرجعي px-to-rem للطباعة سريعة الاستجابة.

Convert from:

Value (Pixels (px))

Base font size (px)

Converted values

16px

rem

1rem

1em

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

ما هو محول وحدة 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% يساوي نصفها.

يأخذ كل تحويل خطوتين. تقوم الأداة أولاً بتحويل مدخلاتك إلى بكسلات عن طريق ضربها في عدد البكسلات في وحدة إدخال واحدة، ثم تقسم قيمة البكسل هذه على عدد البكسلات في وحدة مستهدفة واحدة. عند قاعدة 18px، يصبح 27px 27 , 18 = 1.5rem، وعند أي قاعدة 12pt يصبح 12 × 96 , 72 = 16px. يتم تقريب النتائج إلى أربع منازل عشرية على الأكثر، لذا فإن 15px عند قاعدة 16px تقرأ 0.9375rem. وحدات Viewport مثل vw وvh ليست جزءًا من المحول، لأنها تعتمد على حجم النافذة بدلاً من حجم الخط. حجم الخط الأساسي صفر أو أقل يعود إلى 16px.

يتم تشغيل كل شيء في متصفحك أثناء الكتابة، لذلك لا يوجد تحميل ولا انتظار على الخادم. قم بتغيير حجم الخط الأساسي لتصميم مكون يقوم بتعيين حجم الخط الخاص به، وقراءة النتائج في كل وحدة، ونسخ المكون الذي تحتاجه. يمنحك جدول px-to-rem المدمج مرجعًا جاهزًا للأحجام التي تظهر بشكل أكبر في مقياس الكتابة.

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

أدخل قيمة واختر وحدتها
اكتب الرقم الذي تريد تحويله واختر الوحدة الموجودة حاليًا - px أو rem أو em أو pt أو %. يمكنك أيضًا لصق قيمة بوحدتها، مثل 24px، وستقرأ الأداة الوحدة لك.
اضبط حجم الخط الأساسي
اضبط حجم الخط الجذر إذا كان مشروعك يستخدم شيئًا آخر غير المتصفح الافتراضي 16 بكسل. يتحكم هذا في كيفية ارتباط REM و EM و٪ بالبكسل.
اقرأ كل وحدة في وقت واحد
يعرض المحول القيمة المكافئة في جميع الوحدات المدعومة على الفور ، لكل منها لاحقة الوحدة الخاصة به حتى تتمكن من إسقاطها مباشرة في CSS.
انسخ أو استخدم الجدول المرجعي
انسخ أي نتيجة بنقرة واحدة ، أو امسح الجدول المرجعي 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

Flexbox Generator

Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.

CSS

css

CSS Gradient Generator

Create beautiful CSS gradients with live preview

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

تعلم المزيد

اقرأ الدليل الكامل محول وحدة CSS

Command Palette

محول وحدة CSS

ما هو محول وحدة CSS؟

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

أدخل قيمة واختر وحدتها

اضبط حجم الخط الأساسي

اقرأ كل وحدة في وقت واحد

انسخ أو استخدم الجدول المرجعي

الميزات الرئيسية

كل وحدة في آن واحد

حجم الخط الأساسي القابل للتكوين

ثنائي الاتجاه، أي اتجاه

جدول مرجعي PX-to-REM