لماذا م بدلا من بكسل؟

Question

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

Answer 1

وكان السبب سألت هذا السؤال الذي كنت قد نسيت كيفية استخدام م هو كما كان بينما كنت القرصنة بسعادة في CSS. لم يكن الناس تلاحظ أن ظللت السؤال عام وأنا لم يكن يتحدث عن تحجيم الخطوط في حد ذاته. كنت أكثر اهتماما في كيفية تعريف أنماط على <القوي> أي عنصر كتلة معينة في الصفحة.

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

استخدام بكسل لتحديد العرض

وهنا مثال يوضح. نقول لدينا شعبة العلامة التي نريد أن تتحول إلى مربع تاريخ أنيق، قد تكون لدينا HTML رمز يشبه هذا:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

ووتنفيذ بسيط من شأنه تحديد عرض الطبقة date-box في مقصف:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

المشكلة

ولكن، إذا كنا نريد أن حجم ما يصل النص في المتصفح لدينا وتصميم كسر. فإن النص تنزف أيضا خارج منطقة الجزاء وهو تقريبا نفس ما يحدث مع تصميم SO بأنها <لأ href = "https://stackoverflow.com/questions/609517/why-em-instead-of-px/609543#609543" > flodin يشير. وذلك لأن مربع ستبقى بنفس الحجم في العرض كما تم تأمينه ل50px.

استخدام م بدلا

وهناك طريقة أكثر ذكاء هي تحديد عرض في نظم الإدارة البيئية بدلا من ذلك:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

وبهذه الطريقة يكون لديك تصميم السوائل على مربع التاريخ، أي مربع سوف يصل حجم جنبا إلى جنب مع النص بما يتناسب مع حجم الخط المحدد للمربع التاريخ. في هذا المثال، يتم تعريف حجم الخط في * كما 10pt والإرادة يصل حجم 2.5 مرة إلى أن حجم الخط. حتى عندما كنت تحجيم الخطوط في المتصفح، وسوف مربع لديها 2.5 مرة حجم هذا الخط الحجم.

Answer 2

من الخطأ القول بأن أحدهما خيار أفضل من الآخر (وإلا لم يكن لكل منهما غرضه الخاص في المواصفات).قد يكون من الجدير بالذكر أن StackOverflow يستخدم وحدات البكسل على نطاق واسع.إنه ليس الاختيار السيئ الذي قيل لسبوك أنه كان كذلك.

تعريف الوحدات

• بكسل هي وحدة قياس مطلقة (مثل في, نقطة, ، أو سم) والذي يحدث أيضًا أن يكون 1/96 من an في الوحدة (المزيد عن السبب لاحقًا).نظرًا لأنه قياس مطلق، فيمكن استخدامه في أي وقت تريد فيه تحديد شيء ما ليكون بحجم معين، بدلاً من أن يكون متناسبًا مع شيء آخر مثل حجم نافذة المتصفح أو حجم الخط.

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

  غالبًا ما يلزم دمج عناصر ذات حجم ثابت في الصفحة - مثل اللافتات الإعلانية أو الشعارات أو الرموز.وهذا يضمن أنك تحتاج دائمًا على الأقل بعض القياسات المستندة إلى px في التصميم.الصور، على سبيل المثال، سيتم (افتراضيًا) تغيير حجمها بحيث يبلغ حجم كل بكسل 1*px*، لذا إذا كنت تصمم حول صورة فستحتاج إلى بكسل وحدات.كما أنه مفيد جدًا لتحديد حجم الخط بدقة ولعرض الحدود، حيث يكون من الأفضل استخدامه بسبب التقريب بكسل وحدات لغالبية الشاشات.

  ترتبط جميع القياسات المطلقة ارتباطًا وثيقًا ببعضها البعض؛إنه، 1 في يكون دائماً 96 بكسل, ، نحن فقط 1 في يكون دائماً 72 نقطة.(لاحظ أن 1 في لا يكاد يكون في الواقع جسديًا بوصة عند الحديث عن الوسائط المستندة إلى الشاشة).تفترض جميع القياسات المطلقة دقة شاشة اسمية تبلغ 96 بكسل في البوصة ومسافة عرض اسمية لشاشة سطح المكتب، وعلى مثل هذه الشاشة بكسل سيكون مساوياً لواحد بدني بكسل على الشاشة وواحد في سيكون مساوياً لـ 96 بكسل ماديًا.على الشاشات التي تختلف بشكل كبير في كثافة البكسل أو مسافة العرض، أو إذا قام المستخدم بتكبير الصفحة باستخدام وظيفة التكبير/التصغير في المتصفح، بكسل لن ترتبط بالضرورة بالبكسلات المادية.

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

  يستخدم م عندما تريد تحديدًا أن يعتمد حجم شيء ما على حجم الخط الحالي.

• % هي أيضًا وحدة نسبية، في هذه الحالة، نسبة إلى ارتفاع أو عرض العنصر الأصلي.فهي بديل جيد ل بكسل وحدات لأشياء مثل العرض الإجمالي للتصميم إذا كان تصميمك لا يعتمد على أحجام بكسل محددة لتعيين حجمه.

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

Answer 3

ولدي جهاز كمبيوتر محمول صغير مع دقة عالية ولديك لتشغيل فايرفوكس في 120٪ تكبير النص لتكون قادرة على قراءة دون التحديق.

والعديد من المواقع لديها مشاكل مع هذا. تخطيط يصبح مشوه كل شيء، هو قطع نص في أزرار في نصف أو يختفي تماما. حتى stackoverflow.com يعاني منه:

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

Answer 4

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

شاشة الكمبيوتر عادة لا تكون 96 نقطة في البوصة!(أو نقطة في البوصة، إذا كنت تريد أن تكون متحذلقًا.)

البكسل ليس له حجم مادي ثابت.
(نعم، تم إصلاحه في الداخل واحد الشاشة فقط، ولكن في الشاشة التالية، من المرجح أن يكون البكسل أكبر أو أصغر، وبالتأكيد ليس 1/96 من البوصة.)


دليل
ارسم خطًا بطول 960 بكسل.قم بقياسها باستخدام مسطرة مادية.هل هو 10 بوصات؟لا..؟
قم بتوصيل الكمبيوتر المحمول الخاص بك بالتلفزيون الخاص بك.هل الخط 10 بوصات الآن؟لا يزال لا؟
إظهار الخط على جهاز iPhone الخاص بك.لا يزال نفس الحجم؟ولم لا؟

من هو مخترع أسطورة شاشة الكمبيوتر بدقة 96 نقطة في البوصة؟
(تعمل بعض الأديان بأسطورة 72 نقطة في البوصة.ولكن على نفس القدر من الخطأ.)

Answer 5

إنه مفيد لكل شيء يجب أن يتناسب مع حجم الخط.

إنه مفيد بشكل خاص في المتصفحات التي تطبق التكبير/التصغير عن طريق تغيير حجم الخط.لذلك إذا قمت بتغيير حجم جميع العناصر الخاصة بك باستخدام em إنهم يتوسعون وفقًا لذلك.

Answer 6

لأن م (http://en.wikipedia.org/wiki/Em_(الطباعة)) يتناسب طرديًا مع حجم الخط المستخدم حاليًا.إذا كان حجم الخط، على سبيل المثال، 16 نقطة، فإن em الواحد يساوي 16 نقطة.إذا كان حجم الخط لديك 16 بكسل (ملحوظة:ليست مثل النقاط)، واحد هو 16 بكسل.

وهذا يؤدي إلى أمرين (مرتبطين):

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

Answer 7

وعلى سبيل المثال:

والرمز: الجسم {FONT-SIZE: 10px؛} // تبقي على 10 جميع الأحجام أدناه صحيحة، تغيير هذه القيمة وتغيير بقية لتكون على سبيل المثال 1.4 من هذه القيمة

تحليل 1 {حجم الخط: 1.2em؛} // 12px

تحليل 2 {حجم الخط: 1.4em؛} // 14px

تحليل 3 {حجم الخط: 1.6em؛} // 16px

تحليل 4 {حجم الخط: 1.8em؛} // 18px

5 {FONT-SIZE: 2em؛} // 20px

...

والجسم

1

2

3

4

5

وعن طريق تغيير قيمة في جسم تغيير بقية تلقائيا أن يكون نوعا من أضعاف القيمة الأساسية ...

و10 × 2 = 20 10 × 1.6 = 16 الخ

هل يمكن أن يكون القيمة الأساسية كما 8px ... لذلك 8 × 2 = 16 8 × 1.6 = 12.8 // قد يتم تقريب بواسطة المتصفح

Answer 8

وهناك سبب عملي جدا هو أن IE 6 لا يسمح لك تغيير حجم الخط في حالة تحديد ذلك باستخدام بكسل، في حين أنها لا إذا كنت تستخدم وحدة نسبية مثل طب الطوارئ أو النسب المئوية. لا يسمح للمستخدم لتغيير حجم الخط أمر سيء للغاية بالنسبة للمعاقين. على الرغم من انها في تراجع، لا يزال هناك الكثير من IE 6 المستخدمين هناك.

Answer 9

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

Answer 10

والسبب الرئيسي لاستخدام م أو النسب المئوية هو للسماح للمستخدم لتغيير حجم النص دون كسر التصميم. إذا قمت بتصميم مع الخطوط المحددة في بكسل، فإنها لا تغيير الحجم (IE 6 وغيرها) إذا اختار المستخدم <م> حجم النص - أكبر . وهذا أمر سيء للغاية بالنسبة للمستخدمين ذوي الإعاقات البصرية.

لعدة أمثلة ومقالات عن تصاميم مثل هذه (هناك عدد لا يحصى للاختيار من بينها)، انظر العدد الأخير من قائمة بصرف النظر: <لأ href = "http://www.alistapart.com/articles/fluidgrids "يختلط =" نوفولو noreferrer "> شبكات السائل ، والمادة القديمة كيفية الحجم في CSS أو دان سيدرهولم في الرصاص التصميم الإلكتروني .

ويجب أن لا يزال يتم عرض الصور الخاصة بك مع أحجام بكسل، ولكن، بشكل عام، فإنه لا يعتبر شكل جيد لحجم النص الخاص بك مع بكسل.

وبقدر ما أنا شخصيا يحتقر IE6، ويشغل حاليا منصب <م> فقط متصفح الموافقة على الجزء الأكبر من المستخدمين في شركتنا فورتشن 200.

Answer 11

يوجد حل بسيط إذا كنت تريد استخدام px لتحديد حجم الخط، ولكنك لا تزال ترغب في سهولة الاستخدام التي يوفرها em عن طريق وضع هذا في ملف CSS الخاص بك:

body {
  font-size: 62.5%;
}

الآن حدد لك p (وغيرها) علامات مثل هذا:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

وما إلى ذلك وهلم جرا.

Answer 12

وربما كنت ترغب في استخدام م لأحجام الخط حتى ذهب IE6 (من موقع الويب الخاص بك). سوف بكسل تكون على ما يرام عندما يصبح التكبير الصفحة (في مقابل النص التكبير) السلوك القياسي.

وقدمت Traingamer بالفعل .

Answer 13

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

وعلى الرغم من انه مضحك، وأنا دائما تستخدم لاستخدام حزب العمال لتحديد حجم الخط وتوليت جميع المواقع تستخدم ذلك. كنت لا تستخدم عادة أحجام بكسل في تطبيقات أخرى (مثل وورد). وأنا أعتقد أنها لأنهم للطباعة - ولكن الحجم هو نفسه في متصفح الويب كما في Word ...