shift

واحدهای اندازه در css

واحدهای اندازه در css

عاطفه
دسته: طراحی وبسایت  تگ ها: واحدهای اندازه در CSS , تفاوت EM با PX , فونت سایز

 


قصد داریم در این مقاله کوتاه در مورد انواع مختلف واحدهای اندازه در CSS صحبت کنیم.
 اندازه فونت صفحه طراحی سایت یکی از المان های مهم در خوانا بودن هرچه بهتر خواهد بود. به واسطه کد font-size اندازه و سایز متن و یا margin,padding,width,height یک المان را با واحدهای اندازه تعیین می‌کنیم.
پرکاربردترین واحدهای اندازه در CSS عبارتند از:

% درصد
in اینچ
cm سانتیمتر
mm میایمتر
px پیکسل
pt پوینت
pc پیکا
em em


البته واحدهای px, em و % در صفحات وب کاربرد بیشتری دارند. قابل توجه است که معمولا از واحدهای

em, px, %, pt, cm, mm, in


برای صفحات وب استفاده می‌شود و از واحدهای

em, cm, mm, in, pt, %


برای چاپ روی کاغذ استفاده می‌شود.
به بیان تفاوت این واحدهای اندازه گیری می پردازیم.

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

  • Pt: یک پوینت نقطه معادل است با ۱/۷۲ اینچ یا ۳۴۷ میلیمتر. نقطه ها تقریبا اندازه ی پیکسل ها هستند، ومانند px واحدهای اندازه ثابتی هستند که نمی توانند بسط داده شوند و برای چاپ بر روی کاغذ از این واحد استفاده می‌شود.
  • %: Percentage واحد درصدی هست که در طراحی رسپانسیو و واکنشگرا به شدت از آن استفاده می‌شود. واحد درصد مانند em است، ولی یک سری تفاوت های اساسی دارد. اول اینکه font-size کنونی همیشه ۱۰۰% درنظر گرفته می‌شود. هر اندازه ای که باشد؛ مثلا ۱۲pt می تواند معادل ۱۰۰% باشد؛ و این در دستگاه های موبایل و غیره بخوبی انعطاف پذبر است و برای فونت‌های درشت تر و ریز تر براحتی می توانیم از درصد های بیشتر و کمتر استفاده کنیم.
  • em: ای ام یک واحد بسط پذیر است که در رسانه های متنی وب بکار می رود. یک em معادل اندازه فونت کنونی است. مثلاً، اگر فونت سایز document یا صفحه ۱۲pt باشد، ۱em نیز معادل ۱۲pt خواهد بود. Em ها طبیعتا بسط پذیر هستند، پس ۲em معادل ۲۴pt و ۵em معادل ۶۰pt خواهد بود و الی آخر. Em ها دارند در صفحات وب محبوب تر می‌شوند بخاطر بسط پذیری و طبع موبایل-فرند بودن آنها.
  • rem: مشکلی که واحد em دارد این است که سایزش نسبت به عنصر والد تعیین میشود و ممکن است دچار مشکل بشوید، برای حل این مشکل میتوانید در کنار em از rem هم استفاده کنید. واحد rem هم مثل em عمل میکند با این تفاوت که سایز فونت نسبت به سایز تعیین شده برای عنصر root مشخص میشود (مثل html, body). واحد اندازه گیری rem در اکثر مرورگر های بجز IE8 و Operamini پشتیبانی میشود.

 برای درک تفاوت بین واحدها یک مثال می‌آوریم. به‌طور کل، ۱em مساوی ۱۲pt مساوی ۱۶px مساوی ۱۰۰% می‌باشد. ببینیم  وقتی از این اندازه فونت‌ها استفاده می‌کنیم، چه اتفاقی می‌افتد، زمانی که فونت پایه‌ی صفحه (body font-size) تغییر می‌کند:
 
همان‌طور که می‌بینید، هم em و هم درصد بزرگ‌تر می‌شوند وقتی‌که اندازه فونت پایه بزرگ‌تر می‌شود، ولی پیکسل و دات ثابت می‌مانند. نوشتن صفحه وب با اندازه‌های ثابت کار را خیلی راحت می‌کند، چون همه‌چیز جای مشخصی دارد؛ ولی برای کاربران، اندازه‌های قابل بسط مناسب‌تر است تا بر روی هر ماشین و دستگاهی که صفحه را می‌بینند اندازه متن خود را مطابقاً تنظیم کند. به همین دلیل، استفاده از واحدهای em و درصد برای متن صفحات وب ترحیج داده می‌شود.

موفق باشید.

نظر خود را بنویسید...
ارسال نظر
لغو