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

Question

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

Answer 1

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

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

Comments

دوست عزیز منظورتان از وابستگی px به مرورگر چیست؟
و 1em به معنای یک ضرب در صد است - صد درصد از چه؟

---

- منظور از وابستگی به مرورگر این است که اگر قرار باشد در آن فونت در تمامی مرورگرها نمایش داده شود و تغییر نداشته باشد، از px استفاده می شود.
- در مورد em، منظور درصدی از المان پدر است.

---

وابستگی به مرورگر برای نمایش تقریبا یک گزینه بی معنی است
۱. تقریبا تمام برنامه نویسان وب می دانند که هر مرورگر نحوه نمایش خود را دارد و لزوما از یک استاندارد واحد برای تفسیر HTML استفاده نمی کنند مثل MS Explorer - البته جدیدا سعی کرده اند که کمی با هم دوست باشند.
۲. مرورگر برای نمایش به ابعاد صفحه نمایش و رزولوشن آن وابسطه است پس بهتر است بگوییم که این وابستگی در اصل از این نقطه است نه مرورگر
۳. شما خود ازمایش کن که ابعاد مشخص شده با PX ایا در دو سیستم حتا با مرورگر یکسان اما با ابعاد صفحه نمایش متفاوت ایا یکسان هستند
دوم آنکه درصد از المان پدر یعنی چه  و احتمالا این تعریف با % یکسان نیست

---

- در مورد px، مساله کاملا روشن و گویا است.
- در مورد em لطفا به این دو قطعه کد توجه کنید:

div style="font-size: 1em">TEXT>
            <div style="font-size: 1.1em">TEXT</div>
        </div><br/>
        
div style="font-size: 1em">TEXT>
            <div style="font-size: 110%">TEXT</div>
        </div>

اگر گویا نیست تا باز هم توضیح بدهم.

---

هر دو یونیت  % , 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 برای همین کار طراحی شده است.