محول PX إلى REM: الدليل الكامل لتحويل وحدة CSS

في المرة الأولى التي سلمني فيها أحد المصممين مواصفات تقول &quot؛ نص الجسم 16px، العناوين 28px، طباعة صغيرة 13px&quot؛ وقال الرصاص الأمامي &quot؛ لكننا نشحن كل شيء في العينية، &quot؛ لقد قمت بالقسمة يدويًا في تطبيق الآلة الحاسبة. ستة عشر على ستة عشر هو واحد، وثمانية وعشرون على ستة عشر هو نقطة واحدة سبعة خمسة، وثلاثة عشر على ستة عشر هو صفر نقطة ثمانية واحد اثنان خمسة. ثم تغير حجم الخط الأساسي إلى عشرة بكسل لـ &quot؛62.5%&quot؛ الإعداد لمشروع مختلف، وقد فعلت كل ذلك مرة أخرى. بعد المرة الثالثة قمت ببناء محول صغير في سير عمل Toolz.dev، وقد أنقذني بهدوء من الأخطاء الحسابية في كل مكون قمت بتصميمه تقريبًا منذ ذلك الحين.

ليرة تركية؛DR: يقوم محول وحدة CSS بتحويل قيمة في وحدة واحدة - px أو rem أو em أو pt أو % - إلى القيمة المكافئة في كل وحدة أخرى، بناءً على حجم الخط الجذر الذي تتحكم فيه (16px افتراضيًا). لتحويل px إلى rem، قم بتقسيم وحدات البكسل على حجم الخط الجذر: 24px ÷ 16 = 1.5rem. للذهاب في الاتجاه الآخر، اضرب: 1.5rem × 16 = 24px. ال محول وحدة CSS يقوم بذلك على الفور لكل وحدة في وقت واحد، ويعمل بالكامل في متصفحك، ويتضمن جدولًا مرجعيًا من px إلى rem يمكنك النسخ منه.

يغطي هذا الدليل كيفية ارتباط الوحدات، ولماذا يهم حجم الخط الأساسي كثيرًا، ومتى يتم الوصول إلى كل وحدة، والرياضيات الدقيقة التي يقوم المحول بتشغيلها. لقد قمت بتصميم الكثير من الواجهات عبر سمات WordPress، وواجهة مستخدم WP Adminify admin، ولوحات معلومات React، ويأتي سؤال الوحدة في كل منها. القواعد بسيطة بمجرد رؤية الرقم الفردي الذي يعلق عليه كل شيء.

لماذا يهم تحويل px إلى rem؟

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

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

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

ما الفرق بين px وrem وem وpt و%؟

يتم حل كل وحدة من هذه الوحدات إلى عدد من وحدات بكسل CSS في وقت العرض، وهي علاقة قيم ووحدات CSS المستوى 4 المسامير لأسفل: يتم تعريف البكسل المرجعي مقابل شاشة 96 نقطة في البوصة، وليس مقابل شاشتك. الفرق هو ما يتم قياسها مقابل.

px هو البكسل المرجعي CSS. إنها وحدة مطلقة بمعنى أنها لا تعتمد على أي حجم خط. 1px يكون 1px. وهذا يجعلها قابلة للتنبؤ بها ولكنها أيضًا لا تستجيب لتفضيلات المستخدم.

ريم يعني &quot؛ الجذر em.&quot؛ واحد rem يساوي حجم خط العنصر الجذر - html عنصر. افتراضيًا، هذا هو 16 بكسل، لذا 1rem يكون 16px، 1.5rem يكون 24px، و 0.5rem يكون 8px. نظرًا لأنها مرتبطة دائمًا بالجذر، فإن قيمة rem تعني نفس الشيء في كل مكان في المستند، بغض النظر عن مدى تداخل العنصر.

م نسبة إلى حجم الخط الحالي عنصر. إذا كان حجم الخط &#39؛s هو 20 بكسل، إذن 1em بداخله 20 بكسل، 1.5em هو 30 بكسل، وهكذا. المصيد هو أن المركبات م: إذا قام أحد الوالدين بالتجميع font-size: 1.2em والطفل أيضا يحدد 1.2emالحجم الفعال لـ Child&#39؛ هو 1.2 × 1.2 من الجد. تفترض هذه الأداة وجود عنصر بحجم القاعدة، لذا فإن em وrem يقرأان نفس الشيء - وتقوم بتصميم سياق em محدد عن طريق تعيين حجم الخط الأساسي على هذا العنصر وحجم #39؛s.

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

% بالنسبة لحجم الخط، فهي نسبة مئوية من الأصل (أو القاعدة عند الجذر). 100% يساوي الحجم المرجعي و 50% يساوي نصفه. عند قاعدة 16px، 100% هو 16px و 150% هو 24px.

فيما يلي كيفية اصطفاف القيم المشتركة عند الجذر الافتراضي 16px:

px	ريم	م	حزب العمال	%
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
24	1.5	1.5	18	150
32	2	2	24	200

ال محول وحدة CSS قم بإنشاء هذا الجدول بأكمله لأي قاعدة قمت بتعيينها، حتى تتمكن من وضع مقياس كتابة كامل في وقت واحد.

كيف يغير حجم الخط الأساسي كل شيء؟

حجم الخط الأساسي (الجذر) هو المحور لكل وحدة نسبية. قم بتغييره وكل تحويل rem وem و% يتغير معه، بينما يظل px وpt في مكانهما.

الافتراضي للمتصفح هو 16 بكسل، ولهذا السبب 1rem عادة 16px. ولكن يمكنك ضبط الجذر على أي شيء. مجموعات الأنماط الشائعة html { font-size: 62.5%; }، مما يجعل الجذر 10px (62.5% من 16). الآن 1rem نظيف 10px، وتصبح الرياضيات &quot؛ حرك العلامة العشرية &quot؛: 1.6rem هو 16px، 2.4rem هو 24px، 0.8rem هو 8px. تعتمد الفرق هذا بحيث تقرأ الأرقام الموجودة في أوراق الأنماط الخاصة بها تقريبًا مثل وحدات البكسل مع الاستمرار في القياس مع تفضيلات المستخدم.

لنمذجة ذلك في المحول، قم بتعيين حجم الخط الأساسي على 10 واقرأ عمود rem. تظهر قيمة 24px الآن على أنها 2.4rem بدلاً من 1.5rem. هذه أيضًا هي الطريقة التي تفكر بها حول em في مكون يحدد حجم الخط الخاص به: إذا تم تعيين البطاقة font-size: 20px، إذن القيم em بداخلها مرتبطة بـ 20، لذا اضبط الأساس على 20 لمعرفة ماذا 1.5em يقرر.

الخطأ الذي أراه في أغلب الأحيان هو نسيان الأساس الذي تم حساب القيمة مقابله. يقوم شخص ما بتحويل 24px إلى 1.5rem بافتراض جذر 16px، ثم يسقطه في مشروع يقوم بتشغيل خدعة 62.5% حيث يكون الجذر 10px - و1.5rem هناك 15px، وليس 24px. الوحدة نسبية، لذا فإن الرقم يعني شيئًا ما فقط بمجرد معرفة القاعدة. عندما ألصق قيمة rem بين المشاريع، أتحقق من حجم خط الجذر أولاً.

كيف يمكنك تحويل px إلى rem و rem إلى px يدويًا؟

الرياضيات هي قسمة واحدة وضرب واحد.

px إلى ريم: اقسم قيمة البكسل على حجم الخط الجذر.

rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem

ريم إلى px: اضرب قيمة rem في حجم الخط الجذر.

px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px

px إلى م يستخدم نفس صيغة rem عندما يكون العنصر بحجم الخط الأساسي، لذلك 24px ÷ 16 = 1.5em. الفرق مفاهيمي وليس حسابي: يتم قياس em مقابل العنصر الحالي، لذلك إذا كان حجم هذا العنصر &#39؛ يختلف عن الجذر، فإنك تستخدم حجمه كقاعدة.

px إلى pt: اضرب في 0.75، لأن 1px = 0.75pt. لذا 16px × 0.75 = 12pt. الذهاب في الاتجاه الآخر، pt × 1.333 = px.

px إلى %: اقسم على القاعدة واضرب في 100. إذن 24px ÷ 16 × 100 = 150%.

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

متى يجب عليك استخدام كل وحدة؟

لا توجد وحدة واحدة صحيحة؛ هناك وحدة مناسبة لكل وظيفة.

استخدم rem لأحجام الخطوط. هذه هي أقوى توصية في القائمة. يتدرج Rem مع تفضيل حجم خط المتصفح &#39؛s، وهو فوز حقيقي في إمكانية الوصول، ولأنه مثبت على الجذر فإنه لا يتضاعف بشكل غير متوقع. تقوم معظم الفرق بقياس جميع أنواعها في العينية.

استخدم rem أو px للتباعد، اعتمادًا على نظامك. تعبر العديد من أنظمة التصميم عن الهامش والحشو العيني بحيث يتم قياس التباعد مع النوع. ويحافظ البعض الآخر على التباعد في px للحصول على تخطيطات مثالية للبكسل. كلاهما يمكن الدفاع عنه؛ اختر واحدًا وكن متسقًا.

استخدم em للأشياء التي يجب أن تتوسع بعنصرها الخاص. يعد استخدام الحشو على الزر الذي يجب أن ينمو باستخدام الزر &#39؛s استخدامًا كلاسيكيًا لـ em - اضبط الحشو في em وسيتتبع النص تلقائيًا. يعد تحديد حجم الأيقونة بالنسبة للنص المجاور أمرًا آخر.

استخدم px للحدود والتفاصيل الدقيقة. أ 1px يجب أن تبقى الحدود عادة 1px؛ نادرًا ما تريد تغيير حجم خط الشعر بحجم الخط. غالبًا ما تتم كتابة نقاط توقف استعلام الوسائط أيضًا بلغة px، على الرغم من أن البعض يفضل em هناك لسلوك التكبير/التصغير.

استخدم pt فقط في أوراق أنماط الطباعة. إذا كنت تصمم شيئا ل @media print، النقاط هي الوحدة الأصلية للطباعة وتستحق الاستخدام. على الشاشة، تفضل px أو rem.

استخدم % لعرض السوائل وأحياناً لأحجام الخطوط. النسبة المئوية موجودة في كل مكان في التخطيط (width: 50%)، وكحجم خط يتم استخدامه أحيانًا عند الجذر لخدعة 62.5%.

ما هي الأخطاء الشائعة في وحدات CSS؟

الأول هو مشكلة عدم التطابق الأساسي التي تم وصفها بالفعل: التحويل مقابل حجم خط الجذر الخاطئ. تعرف دائمًا على الجذر الخاص بك قبل الوثوق برقم rem.

والثاني هو قيم ريم مفرطة الدقة. بعض التحويلات لا تقسم بالتساوي - 15 بكسل عند قاعدة 16 بكسل هي 0.9375ريم، و13 بكسل هي 0.8125ريم. هذه الكسور العشرية الطويلة دقيقة ولكنها قبيحة، وتقريبها بشدة (على سبيل المثال إلى 0.94rem) يؤدي إلى تغيير الحجم المعروض بمقدار جزء من البكسل. قاعدتي: احتفظ بثلاثة أو أربعة أرقام عشرية لـ rem، أو اختر القيم الأساسية وقيم الحجم التي تقسم بشكل نظيف. يقوم المحول بالتقريب بشكل معقول ويقطع الأصفار الزائدة 24px يقرأ كما 1.5rem بدلاً من 1.5000rem.

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

الرابع هو افتراض أن pt وpx قابلان للتبديل. ليسوا كذلك؛ 12pt يكون 16pxلا 12px. يعد مزجها في ورقة أنماط تمتد عبر الشاشة والطباعة خطأً بسيطًا.

كيف يتعامل محول Toolz.dev مع الرياضيات؟

يستخدم المحول تحت الغطاء فكرة واحدة: التعبير عن كل وحدة بعدد من وحدات البكسل، ثم التحويل عبر وحدات البكسل. كل وحدة لها &quot ثابت؛ بكسل لكل وحدة وquot؛ بالنظر إلى حجم الخط الأساسي - px هو 1، وrem وem هما الأساس، وpt هو 96/72، و% هو الأساس/100. للتحويل، فإنه يضرب الإدخال بوحدته &#39؛s بكسل لكل وحدة للحصول على قيمة بكسل، ثم يقسم على الوحدة المستهدفة &#39؛s بكسل لكل وحدة. يمنح هذا التمرير الفردي كل وحدة في وقت واحد، ولهذا السبب ترى تحديث px وrem وem وpt و% معًا أثناء الكتابة.

كما أنه يوزع القيم مع الوحدات المرفقة، وبالتالي اللصق 24px يملأ كلا من الرقم والوحدة لك. يتم تقريب النتائج إلى بضع منازل عشرية وتجريدها من الأصفار الزائدة لسهولة القراءة، ولكل منها زر نسخ بنقرة واحدة ينسخ القيمة مع لاحقة الوحدة الخاصة بها جاهزة للصقها في CSS. كل شيء يعمل من جانب العميل - لا يتم تحميل أي شيء تكتبه - وهو ما يطابق نهج الخصوصية أولاً خلف كل أداة على الموقع.

إذا كنت تختار أيضًا الألوان أو الظلال المبنية لنفس المكون، فإن مولد التدرج CSS و مولد الظل الصندوق عش بنقرة واحدة، وعلى نطاق أوسع محول الوحدة يتعامل مع الوحدات المادية مثل الطول والوزن عندما ينحرف عملك خارج CSS.

الأسئلة المتداولة

كيف يمكنني تحويل PX إلى REM؟

قسّم قيمة البكسل على حجم الخط الجذر. في المتصفح الافتراضي البالغ 16 بكسل ، Rem = px ÷ 16 ، لذا فإن 16 بكسل هي 1 rem ، و 24 بكسل هي 1.5rem ، و 8 بكسل هي 0.5rem. أدخل قيمة البكسل في المحول ويظهر مكافئ REM على الفور بأي حجم خط أساسي قمت بتعيينه.

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

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

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

تقوم المتصفحات بتعيين عنصر html على 16px افتراضيًا، ولهذا السبب يبدأ هذا المحول عند 16. نظرًا لأن 1rem يساوي دائمًا حجم الخط الجذر، فإن هذا الإعداد الافتراضي يجعل 16px يساوي 1rem تمامًا. يمكن للمستخدمين تغيير حجم النص الافتراضي للمتصفح &#39؛s، وهو أحد أسباب تفضيل rem للطباعة التي يمكن الوصول إليها والقابلة للتطوير.

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

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

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

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

ماذا تفعل خدعة حجم الخط بنسبة 62.5%؟

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

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

يُفضل Rem بشكل عام لأحجام الخطوط لأنه يتدرج مع تفضيل حجم خط متصفح المستخدم &#39؛s، مما يحسن إمكانية الوصول، في حين أن px الثابت لا يفعل ذلك. تصمم العديد من الفرق بلغة px وتتحول إلى rem للحصول على CSS النهائي. غالبًا ما تظل تفاصيل التخطيط مثل الحدود في px.

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

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

---