برو به محتوای اصلی
سیاوش محمودیان
بنیانگذار جواب‌کو
۳ سال پیش پرسیده شده

در CSS تفاوت واحدهای em، rem و px چیست؟

من کجام؟ اینجا کجاست؟

در جوابکو می‌تونید در مورد هر موضوعی سوال کنید، به سوالای بقیه جواب بدید و تجربه‌تون رو به اشتراک بگذارید!

  • واحد px: همینطور که از اسمش مشخصه، هر px به اندازه ابعاد یک پیکسل روی صفحه نمایشه
  • واحد em: واحد em به اندازه ابعاد حرف M انگلیسی در فونت جاریه. یعنی اگر مثلا اندازه فونت رو ۱۶ پیکسل در نظر بگیریم، یک em برابر با 16x16 پیکسله که معنیش اینه اگر حرف M انگلیسی تو توی یه مربع بندازیم، اون مربع ۱۶ در ۱۶ پیکسله. جالبی واحد em اینه که اندازه این مربع رو بر اساس اندازه فونت المان والد (parent element) در نظر میگیره. مثلا اگر شما یک div داشته باشید که اندازه فونتش 20px باشه و داخل اون div یک p بذارید و سایزش رو بنویسید 2em، اندازه فونت اون p میشه ۴۰ پیکسل ولی شما اون ۴۰ پیکسل رو دستی ننوشتید. برای همین اگر بخواید اندازه فونت تمام المان‌های داخل اون div رو با هم یک جا ببرید بالا، اون ۲۰ پیکسل رو فقط عوض می‌کنید.
  • واحد rem: عین واحد em است با این تفاوت که اندازه‌اش رو بر مبنای اندازه فونت ریشه‌ای‌ترین المان صفحه که بهش سایز دادین حساب می‌کنه. مثلا اگر body فونت‌سایز ۱۶ داره، هرجا توی صفحه از rem استفاده کنید بر اساس اون ۱۶ حساب میکنه.

من سال ۹۲ یک ارائه داشتم دقیقا با همین عنوان و موضوع و اگر وقت دیدن ویدیو دارید، اینجا رو تماشا کنید۱۰۶ که بیشتر در مورد این واحدها بدونید.