یکی از سوال هایی که نقدها و گفتگو های متعددی را به همراه داشته، این است که چه واحد اندازه گیری را بهتر است در CSS خود بکار ببریم. در این مقاله به مقایسه ی سه واحد اندازه گیری rem, em, pixel می پردازیم.
Pixel
فکر نکنم کسی با این کلمه ناآشنا باشه. بیشتر افراد میدونند پیکسل چی هست و با این واحد کار کرده اند. پیکسل ها واحد های ثابتی هستند که در رسانه ی تصویری استفاده می شوند (یعنی به تصویر کامپیوتر یا موبایل بستگی دارند).
یک پیکسل معادل است با یک نقطه بر روی صفحه نمایشگر (کوچکترین جزء رزولوشن تصویر). طراحان غالبا با پیکسل کار میکنند و راحت تر هست که سایز ها را به طور مستقیم از فتوشاپ بر روی کد بیاوریم.
خوب مشکلش چیه؟
من از طرفدارای accessibility هستم و اون رو به زیبایی ترجیح میدم. یک مشکلی که واحد پیکسل دارد این است که همیشه ثابت است.
اگر شما همه ی سایز فونت ها، المان ها رو به پیکسل مقداری دهی کنید. شما با احترام با کاربر نهایی برخورد نمیکنید.
چرا؟
در بیشتر مرورگر ها، کاربر میتواند سایز پیش فرض فونت را که غالبا ۱۶px هست، تغییر دهد.حال ممکن است کاربری ضعف در بینایی داشته باشد و نتواند متن های کوچک را بخواند و بخواهد آنرا به ۲۰px تغییر دهد، پس انتظار دارد که تمامی سایز فونت ها مطابق با آن تغییر کند.
ولی اگر وب سایتی، سایز فونت را با پیکسل مقدار دهی کرده باشد این اتفاق نخواهد افتاد و مثلا heading که ۳۰px مقدار دهی شده، همیشه ۳۰px نمایش داده میشود و عملا شما تصمیم کاربر را نادیده میگیرید و مجبورش میکنید که زوم کند. این ممکن است از دیدگاه طراح سایت عالی به نظر بیاد (چون همه چیز سر جاشه و مشکلی ندارد) ولی از دیدگاه کاربر نهایی اینطور نیست. سایت رو برای کاربر درست کنید نه برای خودتان
یکی از بهترین کارها برای تایپوگرافی در وب، استفاده از واحد های نسبی (relative units) مثل em و rem میباشد.
حالا میریم سراغ بررسی این دو واحد اندازه گیری و تفاوت هاشون.
EM
اگر شما با دنیای وب آشنا باشید، بدون شک اسم em را شنیده اید. واحد em به اندازه ابعاد حرف M انگلیسی در فونت جاریه. یعنی اگر مثلا اندازه فونت رو ۱۶ پیکسل در نظر بگیریم، یک em برابر با ۱۶*۱۶ پیکسله که معنیش اینه اگر حرف M انگلیسی رو توی یه مربع بندازیم، اون مربع ۱۶ در ۱۶ پیکسله. جالبی واحد em اینه که اندازه این مربع رو بر اساس اندازه فونت المان والد (parent element) در نظر میگیره. مثلا اگر شما یک div داشته باشید که اندازه فونتش ۲۰px باشه و داخل اون div یک p بذارید و سایزش رو بنویسید ۲em، اندازه فونت اون p میشه ۴۰ پیکسل. برای همین اگر بخواید اندازه فونت تمام المان‌های داخل اون div رو با هم یک جا ببرید بالا، اون ۲۰ پیکسل رو فقط عوض می کنید.
اگر متوجه نشدید کد زیر را در نظر بگیرید
h1 { font-size: ۲em }
سایز واقعی فونت h1 در بالا چقدر است؟
همان طور که گفتم em یک واحد اندازه گیری نسبی هست، یعنی اندازه ی آن نسبت به والد آن تعیین میشود.فرض میکنیم که والد آن html است و فونت آن برابر است با ۱۶px . بنابراین سایز فونت h1 میشود ۳۲px.
html { font-size: ۱۶px }
h1 { font-size: ۲em } /* ۱۶px * 2 = 32px */
بنابر همان دلیلی که در قسمت “پیکسل” گفتم. ایده ی بدی هست که سایز فونت را با پیکسل مقدار دهی کنیم و بهتر است به درصد باشد.
html { font-size: ۱۰۰% } /* This means 16px by default*/
علاوه بر سایز فونت، برای margin و padding هم از em استفاده میکنند. و این جا هست که آدم شروع میکنه به گیج شدن.
کد زیر را در نظر بگیرید (فرض کنید که font-size المان html برابر با ۱۰۰% میباشد.)
h1 {
font-size: ۲em; /* ۱em = 16px */
margin-bottom: ۱em; /* ۱em = 32px */
}
p {
font-size: ۱em; /* ۱em = 16px */
margin-bottom: ۱em; /* ۱em = 16px */
}
متعجب شدید که چرا مقدار ۱em در margin-bottom با دو سناریو قبلی جور در نمیاد؟
این پدیده به این دلیل اتفاق افتاده است چون ۱em برابر است با font-size فعلی. چون سایز فونت در h1 برابر است با ۲em. بقیه ی property ها در h1 که با em محاسبه میشوند، ۱em را برابر ۳۲px میبینند.
من به شخصه از طرفدارای em نیستم (مخصوصا در سایز فونت)، چون در حجم کد بالا ممکن است که این عملیات محاسباتی درگیرت کنه و سر رشته سایز ها از دستت بره و در انتها با یک چیز غیر قابل مدیریت مواجه شی.
REM
به معنای root EM میباشد. یک واحد تایپوگرافی که برابر با سایز فونت root است. یعنی ۱rem همیشه برابر است با font-size که در html تعریف شده است.
همان کد بالا را در نظر بگیرید با این تفاوت که با rem نوشته شده است.
h1 {
font-size: ۲rem;
margin-bottom: ۱rem; /* ۱rem = 16px */
}
p {
font-size: ۱rem;
margin-bottom: ۱rem; /* ۱rem = 16px */
}
مهم نیست که کجا بکار برده شود، ۱rem همیشه برابر است با ۱۶px مگر اینکه سایز فونت html را تغییر دهید.
این مقاله فقط جهت آشنایی کلی با این ۳ واحد اندازه گیری بود و در مقاله ی بعد به موارد استفاده از آنها در جاهای مختلف میپردازیم.