في CSS ، ما هو الفرق بين em و px؟


الاجابه 1:

في النهاية ، كل شيء بكسل

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

ولكن ، أن "بكسل" هو بكسل المادية. هذا ما يمكن أن نسميه "بكسل الجهاز".

أنت لا تتحدث عن "وحدات بكسل الجهاز". أنت تتحدث عن CSS Pixels.

CSS Pixels! == بكسل

"CSS Pixel" تقريبًا kinda-sorta-ish بالقرب من بكسل الجهاز. [1] يعتمد CSS Pixel على هذه الفكرة المتمثلة في "بكسل مرجعي" وهي الزاوية المرئية على جهاز بكثافة بكسل تبلغ 96 نقطة في البوصة بطول طول الذراع تقريبًا. [2] من خلال قوة الرياضيات ، يمكن أن ينتهي "مرجع البكسل" كونها 1.3 مم على الشاشة. ولكن ، هناك أي عدد من الأسباب التي قد لا تكون كذلك.

من المهم أن نبدأ بالنقطة الأساسية التي لا تعني px "بكسل على الشاشة".

هناك وحدات مختلفة للقياس في CSS

هناك فئتان رئيسيتان لوحدات القياس الخاصة بك [3]:

  1. الوحدات المطلقة للوحدات

إذا كانت "وحدة مطلقة" ، فإن وحدة القياس هذه لها علاقة بشيء ما في العالم المادي.

إذا كانت وحدة نسبية ، فسيتم حساب القيمة في وحدة مطلقة.

حتى بكسل مقابل م

px هي "الوحدة المطلقة" ؛ سيخبر محرك CSS المتصفح باستخدام هذا "الطول" للتحجيم. سيقوم المستعرض ونظام التشغيل بترتيب كيفية مقارنة هذا الطول بـ "بكسل الجهاز" وعرضه. تتمتع Px بعلاقة ثابتة بـ "بكسل الإشارة" الذي تحدثنا عنه سابقًا. بكسل لن يتغير.

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

أفضل طريقة للتفكير في em هي التظاهر بأن bit em غير موجود ، ومعاملة القيمة كمضاعف. على سبيل المثال:

.foo {font-size: 1.5em؛ / * مربكة * / حجم الخط: 1.5 ؛ / * غير صالح ، ولكن يجب أن يكون قد تم تنفيذه بالكامل بدلاً من استدعاءه em * / line-height: 1.5 / * انظر كيف يقبل ارتفاع الخط مضاعف بدون وحدة؟ * /}

لذا فإن أول فرق كبير هو أن أحدهما مطلق ، والآخر نسبي.

بكسل و م في التطبيق

ستُبرز المواقف المختلفة نقاط القوة والضعف لكل وحدة [4].

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

لذلك واجهت هذا كثيرا:

body {font-size: 16px؛} h1 {font-size: 32px؛ / * الوحدات المطلقة لحجم الخط * / padding: 8px 16px؛ / * الوحدات المطلقة للحشو * /} .foo {font-size: 12px؛ / * اضبط حجم الخط في أصل * /} / * اكتب مجموعة قواعد جديدة للحفاظ على تناسق الأشياء * / .foo h1 {font-size: 24px؛ / * إعادة كتابة قاعدة خط لجعل h1 2x عادي * / padding: 6px 12px؛ / * إعادة كتابة ل 1 / 4th و 1/2 * /}

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

body {font-size: 16px؛} h1 {font-size: 2em؛ / * الوحدة النسبية * / padding: .25em .5em؛ / * الوحدات النسبية للحشو * /} .foo {font-size: .75em؛ }

لذلك قمت بحفظ كتابة مجموعة قواعد كاملة باستخدام em. حجم الخط محسوب على 24px ، والحساب محسوب على 6px 12px.

وبالتالي فإن الفرق الكبير هو القدرة على جعل حجم الأشياء متناسبًا - دون كتابة المزيد من الأكواد

الحواشي

[1] بناء الجملة وأنواع البيانات الأساسية

[2] CSS Values ​​and Units Module Level 3

[3] كيف يختلف "em" "px" و "٪" عن بعضهما البعض في CSS؟

[4] مواقع الويب المستجيبة تدور حول كيفية قياسك (في CSS الخاص بك)


الاجابه 2:

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

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

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

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


الاجابه 3:

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

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

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

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