مقایسه سه واحد اندازه گیری px, em و rem

یکی از سوال هایی که نقدها و گفتگو های متعددی را به همراه داشته، این است که چه واحد اندازه گیری را بهتر است در CSS خود بکار ببریم. در این مقاله به مقایسه ی سه واحد اندازه گیری rem, em, pixel می پردازیم.

Pixel

فکر نکنم کسی با این کلمه ناآشنا باشه. بیشتر افراد میدونند پیکسل چی هست و با این واحد کار کرده اند. پیکسل ها واحد های ثابتی هستند که در رسانه ی تصویری استفاده می شوند (یعنی به تصویر کامپیوتر یا موبایل بستگی دارند).

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

خوب مشکلش چیه؟

من از طرفدارای accessibility هستم و اون رو به زیبایی ترجیح میدم. یک مشکلی که واحد پیکسل دارد این است که همیشه ثابت است.

اگر شما همه ی سایز فونت ها، المان ها رو به پیکسل مقداری دهی کنید. شما با احترام با کاربر نهایی برخورد نمیکنید.

چرا؟

در بیشتر مرورگر ها،  کاربر میتواند سایز پیش فرض فونت را که غالبا 16px هست، تغییر دهد.حال ممکن است کاربری ضعف در بینایی داشته باشد و نتواند متن های کوچک را بخواند و بخواهد آنرا به 20px تغییر دهد، پس انتظار دارد که تمامی سایز فونت ها مطابق با آن تغییر کند.

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

یکی از بهترین کارها برای تایپوگرافی در وب، استفاده از واحد های نسبی (relative units) مثل em و rem میباشد.

حالا میریم سراغ بررسی این دو واحد اندازه گیری و تفاوت هاشون.

EM

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

اگر متوجه نشدید کد زیر را در نظر بگیرید


h1 { font-size: 2em }

سایز واقعی فونت h1 در بالا چقدر است؟

همان طور که گفتم em یک واحد اندازه گیری نسبی هست، یعنی اندازه ی آن نسبت به والد آن تعیین میشود.فرض میکنیم که والد  آن html است و فونت آن برابر است با  16px . بنابراین سایز فونت h1 میشود 32px.


html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

بنابر همان دلیلی که در قسمت “پیکسل” گفتم. ایده ی بدی هست که سایز فونت را با پیکسل مقدار دهی کنیم و بهتر است به درصد باشد.


html { font-size: 100% } /* This means 16px by default*/

علاوه بر سایز فونت، برای margin و padding هم از em استفاده میکنند. و این جا هست که آدم شروع میکنه به گیج شدن.

کد زیر را در نظر بگیرید (فرض کنید که font-size المان html برابر با 100% میباشد.)


h1 {
  font-size: 2em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 32px */
}

p {
  font-size: 1em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 16px */
}

متعجب شدید که چرا مقدار 1em در margin-bottom با دو سناریو قبلی جور در نمیاد؟

این پدیده به این دلیل اتفاق افتاده است چون 1em برابر است با font-size فعلی. چون سایز فونت در h1 برابر است با 2em. بقیه  ی property ها در h1 که با em محاسبه میشوند، 1em را برابر 32px میبینند.

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

Simon Willans (Senior UX Developer)

REM

به معنای root EM میباشد. یک واحد تایپوگرافی که برابر با سایز فونت root است. یعنی 1rem همیشه برابر است با font-size که در html تعریف شده است.

همان کد بالا را در نظر بگیرید با این تفاوت که با rem نوشته شده است.


h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

مهم نیست که کجا بکار برده شود، 1rem همیشه برابر است با 16px مگر اینکه سایز فونت html را تغییر دهید.

این مقاله فقط جهت آشنایی کلی با این 3 واحد اندازه گیری بود و در مقاله ی بعد به موارد استفاده از آنها در جاهای مختلف میپردازیم.

0/5 (0 نظر)
این مطالب را از دست ندهید
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
View all comments
سایت ساز بوم، سرزمینی است که به منظور ایجاد راحتی و آسایش برای کاربرانش طراحی شده است. بوم بستری است که در آن می توانید به شکلی آسان و سریع در حین این که آزادی در طراحی دارید، سایت یا فروشگاه اینترنتی خود را به راه اندازید.

اطلاعات تماس

0
افکار شما را دوست دارم، لطفا نظر دهیدx
()
x