بخاطر اتکا طراحان وب سایت بر روی مقدار پیکسل، فکر میکنم برخی از ما درک کاملی از مقدار em و اینکه چطور با این مقدار کار کنیم نداریم.
امیدوارم این مقاله به شما کمک کند تا یادبگیرید چگونه از واحد em در طراحی وب سایت های خود استفاده کنید.
تعریف em
برابر با مقدار محاسبه شده ویژگی “font-size” المانی که از آن استفاده کرده اید.
به عبارت دیگه، اگر CSS زیر را داشته باشید:
.element {
font-size: 20px;
}
این بدان معنا است که 1em تعریف شده در آن المان و بچه های آن المان برابر با 20px است.
بنابراین اگر شما کد زیر را بنویسید:
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
بدان معنا است که عرض و ارتفاع المان (که در اینجا 4em و 4em است) باید 80px و 80px محاسبه شود (20px * 4 = 80px).
بیایید emی اش کنیم
کلید اصلی برای این کار به درک درست ما از واحد “em” است. بر اساس ویکی پدیا:
em واحداندازه گیری در فیلد تایپوگرافی است و برابر با font-size اعمال شده بر آن المان است. نام em مربوط به M.Originally است؛ واحدی که از عرض “M” در طرح حروف داده شده است.
این مقاله توضیح میدهد با اینکه واحد em براساس عرض حرف “M” است، اما درحال حاضر واحد em به اندازه فونت بستگی دارد.
با این شیوه محاسبه در CSS خود بصورت مستقیم نمیگوییم em چیست؛ بستگی به این موضوع دارد که در استایل شیت چه اتفاقی افتاده است. بنابراین بصورت تئوریک اگر شما کل مقادیر خود را بصورت em بنویسید، تغییر یک اندازه فونت این قدرت را دارد که کل لی اوت شما را تحت تاثیر قرار دهد.
اگر “font-size” را تعریف نکنیم چه میشود؟
در مثال بالا، مقدار font-size را بصورت واضح تعریف کردم. مقدار em متعاقبا از تنظیمات "اصلی" می آید. اما چه میشد اگر برای المان اندازه فونت تعیین نمیشد؟
در این شرایط، از آنجایی که ویژگی “font-size” از طریق کل سند به ارث میرسد، مقدار em از همان جا به ارث میرسد. به عبارت دیگر اگر مقداری برای اندازه فونت در نظر نگرفته باشید، مقدار یک em برابر با 16px میشود که مقدار پیش فرض است.
“rem” باید برای افراد بصورت اتوماتیک باشد
زمان خوبی است تا از مقدار جدید CSS3 استفاده کنیم: واحد rem. واحد rem (یا واحد “root em”) بخوبی در مرورگرهای IE9+، FF3.6+، Chrome، Safari 5+، و Opera 11.6+ پشتیبانی میشود.
از نظر من rem کاملا صریح است. به شما این اجازه را میدهد که واحد های em اصلی خود را در واحد “root” یا روت که در المان html ذخیره شده است شکل دهید. با این کار شما میتوانید تنظیمات اندازه فونت را در هر جای استایل شیت داشته باشید، و هر اندازه ای که در “rem” تعریف شده است باید به واحد روت مربوط باشد، و همانند em از پرنت خود ارث بری نمیکند.
و همانند em، اگر font-size را در html تعریف نکرده باشید مقدار پیش فرض 16px میباشد.
دم را غنیمت بشمار
با داشتن 12 سال تجربه در طراحی سایت باید بگویم اکنون زمانی است که میتوان از دست طراحی سایت بر اساس اندازه های فیکس و بر اساس پیکسل نفس راحتی کشید. هرچند اکنون طراحی سایت های واکنش گرا را شروع کرده ام، اما هنوز به واحد پیکسل وابسته ام. از آنجایی که پیکسل میتواند برای المان های لی اوت مناسب باشد، اما برای تایپوگرافی em واحد مناسب تری است.
درحالی که میتوان کل لی اوت را بر اساس em پیاده سازی کرد، فکر میکنم برای طراحی سایت واکنش گرا پیکسل و درصد مناسب تر است – و، همانطور که اشاره کرده ام، از em برای تایپوگرافی استفاده کنید.
بنابراین اگر مثل من فکر میکنید، بیایید دم را غنیمت شماریم و از em و rem در جاهای کاربردی و محسوس استفاده کنیم.
اگر نمیتوانید em را مغلوب کنید به em بپیوندید.
مطالعه بیشتر: واحدهای مختلف اندازه گیری در سی اس اس برای اندازه فونت: px | em | rem
به نقل از: impressivewebs
دیدگاه‌ها
منم موافقم بازم با پیکسل کار کنیم چرا که برای بوت استراپ راحت تره