تفاوت مقدار دهی سایز فونت با استفاده از px و em در چیست؟

Question

من همیشه از px برای مقداردهی سایز فونت در HTML استفاده می کردم ولی به تازگی دیدم که در بعضی از وب سایت ها از em استفاده می کنند. تفاوت این دو روش رو بخوبی درک نکردم، کاربرد عملی استفاده از em چیست و مزیتش نسبت به px در چیست؟

Answer 1

px: پیکسل ها وابسته به مرورگر هستند. این نوع سایزدهی، سایزدهی مطلق است که بر روی صفحه نمایش قابل مشاهده است.

em:  در واقع این نوع سایزدهی به سایز اصلی متن ارجاع می کند. در حقیقت 1em به معنای یک ضرب در صد است است. به عبارت دیگر 100% برابر با یک em ضرب در 100 است. یا به عنوان مثال دیگر 2em برابر با 2 ضرب در صد است. یا به عبارت دیگر 200% برابر با دو em ضرب در 100 است.

Comments

هر دو یونیت  % , em  شباهت هایی دارند اما تفاوت در این است که em با اندازه فونت وابسطه است در صورتی که % به بلاک پیرامون وابسطه است دقیقا برعکس تعریف شما در بالا
برای اطلاعات بیشتر به این ادرسها مراجعه کنید
http://css-discuss.incutio.com/wiki/Em_Vs_Percent_Widths
http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/

---

هدف از مثال بالا نشان دادن وابستگی اندازه فونت در div داخلی به div پدر است.

Answer 2

در نمایش داده ها  روی صفحه نمایش دو موضوع مهم دخیل هستند

1.  ابعاد صفحه نمایش
2.  رزلوشن و یا دقت صفحه نمایش

امروزه ما به تجهیرات مختلفی در بازار دسترسی داریم که تفاوتهای زیادی در این دو عامل با یک دیگر دارند. در این میان نمایش داده ها نیاز به صفحه بندی و چیدمان دارد که تا لحظه نمایش آن نمی توان در مورد ابعاد احتمالی صفحه نمایش استفاده شده نظر داد.
هنگامی که برای تعیین اندازه یک ابجکت ( اندازه فونت و یا هر چیز دیگر) از مقیاس پیکسل px استفاده شود فقط می توان اندازه را نسبت به اندازه صفحه نمایش تطبیق داد. به این صورت که هرچه اندازه صفحه بزرگ تر می شود پیکسل ها نیز بزرگتر شده و در نتیجه ابجکت مورد نظر ما نیز بزرگ تر خواهد شد و برعکس.
اما دقت صفحه نمایش در این رابطه نسبت عکس دارد و اگر به همراه افزایش اندازه صفحه دقت صفحه نیز افزایش یابد پیکسل ها کوچک شده و آبجکت ما نیز کوچک می شود
در این حالت نیاز به یک مقیاس اندازه گیری قابل انعطاف داریم که  هر دو پارامتر را در نظر گرفته باشد. به این صورت می توان اطمینان داشت که متن مورد نظر ما چه در یک موبایل و چه در یک بیلبرد تبلیغاتی به بهترین وجه نمایش یابد. مقیاس em برای همین کار طراحی شده است.