مقیاس اندازه گیری، نقش مهمی در چینش المان های صفحه وب دارد. اهمیت این نقش وقتی دو چندان می شود که قرار است صفحه یا اپلیکیشن تحت وب بر روی دستگاه های مختلف (لپ تاپ، تبلت، موبایل، تلویزیون،...) باز شود. این در حالی است که در سالهایی نه چندان دور، پیکسل (pixel) به عنوان تنها واحد اندازه گیری؛ که معادل یک- نود و ششم اینچ (1/96 inch)، استفاده می شود. دلیل این تقسیم بندی هم محدودیت سخت افزاری مانیتورها بود که حداکثر تا رزولوشن 1024x768 و DPI (dots per inch) برابر با 96 را پشتیبانی می کردند.
اما داستان به همین جا ختم نمی شد! زمانی که یک صفحه وب می بایست بوسیله پرینتر بر روی یک کاغذ چاپ می شد، باید با مقیاس های اندازه گیری دیگری مثل سانتیمتر و میلیمتر سر و کله زد. بنابراین مفهوم پیکسل در یک رسانه چاپی کاملا متفاوت با همان مفهوم در مانیتور بود.
دو نوع مقیاس برای اندازه گیری طول و ابعاد یک المان و فواصل آنها با یکدیگر در CSS وجود دارد:
واحدهای اندازه گیری مطلق براساس اندازه واقعی و طبیعی در دستگاه ها هستند که عموما در تمام آنها نیز یک اندازه دارند. برای نمونه، اندازه یک پیکسل در یک صفحه موبایل با اندازه یک پیکسل در مانیتور لپ تاپ یکسان است و هر دو یک نقطه فیزیکی از صفحه را نورانی می کنند!
واحدای مطلق که در CSS استفاده می شوند به شرح زیر هستند:
واحد px یا پیکسل
پیکسل یا px یکی از پر کاربردترین واحد ها در CSS است. در CSS، هر 1px معادل 1/96 اینچ تعریف می شود. سایر واحدهای اندازه گیری مطلق برمبنای پیکسل تعریف می شوند.
همانطور که پیشتر نیز اشاره شد، دلیل انتخاب واحد 1/96 اینچ، محدودیت مانیتورها برای نمایش رزولوشن 1024x768 و DPI معادل 96 است که به عنوان استاندارد در آن زمان انتخاب شد.
از آنجایی که صفحات دستگاه های جدید، رزولوشن بیشتر و DPI بیشتری دارند، یک ردیف 96 تایی از پیکسل ها که در کنار هم قرار گرفته اند الزاما به اندازه یک اینچ در دستگاه های مختلف نخواهد بود! با این وجود، پیکسل همچنان به عنوان گزینه مناسبی برای استفاده در رسانه های تصویری (غیر چاپی) تلقی می شود. به عنوان برنامه نویس فرانت اند باید حواستان باشد اگر صفحه قرار است برروی پرینتر با کیفیت بالا چاپ شود، از واحدهای سانتیمتر و میلیمتر برای آنها استفاده کنید.
واحد cm یا سانتیمتر
همانطور که در بالا اشاره شد، واحد px، واحد پایه برای سایر واحدهای مطلق است. در CSS هر 1cm معادل 37.8px یا 25.2/64 یک اینچ است.
واحد mm یا میلیمتر
هر 1mm معادل 3.78px یا 1/10 سانتیمتر است.
واحد in یا اینچ
هر 1in معادل 96px یا 2.54cm است.
واحد pt یا پوینت
هر 1pt معادل 1.3333px یا 1/72 اینج است.
واحد pc یا پیکا
هر 1pc معادل 16px یا 1/6 اینچ است.
برخلاف واحدهای اندازی مطلق، واحدهای نسبی براساس سایز یا تنظیمات یک المان دیگر به عنوان مرجع داینامیک تعریف می شوند. برای مثال، اندازه فونت یک المان ممکن است براساس اندازه فونت المان والد (Parent) آن تعیین شود. به این ترتیب به کار بردن لفظ داینامیک به این دلیل است که با هرگونه تغییر در مرجع یا والد؛ اعم از ابعاد و تنظیمات، المان مربوطه از آن تبعیت می کند.
واحدهای اندازه گیری نسبی در CSS به شرح زیر هستند:
واحد em
نامگذاری این واحد به نام em، از واحد اندازه گیری در تایپوگرافی (طراحی و مقیاس فونت) گرفته شده است. منظور از em در تایپوگرافی (Typography)، عبارت است از عرض حرف بزرگ M در هر خانواده فونت (Typeface) و اندازه ای که برای آن در نظر گرفته می شود. در تایپوگرافی، هر em معادل 16 point در نظر گرفته می شود.
به مثال زیر دقت کنید:
.container { font-size: 16px; } .container p { font-size: 1em; } .container h2 { font-size: 3em; } .container h3 { font-size: 2em; }
در کد بالا، اندازه فونت تگ p معادل 16px (16x1) است. اما در مورد h2 برابر با 48px (16x3) و برای h3 برابر با 32px (16x2) است.
واحد rem
این واحد در واقع همان em ولی با سرمنشا Root است. به این معنی مقیاس آن از والد به ارث نمی رسد، بلکه براساس تنظیمات سند اصلی یا همان root document که منظور html می باشد تاثیر می گیرد:
p { font-size: 1.25rem; }
در اکثر مرورگرها، اندازه پیش فرض فونت 16 می باشد. بنابراین مقدار font-size در html برابر با 16pxخواهد بود. بنابراین در مثال بالا، اندازه p برابر است با 20px یعنی 16x1.25.
حال اگر کاربر اندازه فونت پیش فرض مرورگر خود را تغییر دهد، اندازه فونت p به همان نسبت بزرگتر یا کوچکتر خواهد شد.
واحد %
درصد، واحدی برمبنای درصدی از والد آن:
div { width: 400px; } div p { width: 75%; }
در این مثال، عرض المان والد 400px است و عرض پاراگراف داخلی آن 300px یعنی 400x.75 محاسبه می شود.
واحد vw
عرض قابل روئیت. 1vw معادل 1 درصد از عرض viewport است. viewport عبارت است از بخش قابل مشاهده از یک صفحه وب برای کاربر. برای مثال:
body { width: 100vw; }
عرض المان body معادل 100vw یا 100% عرض viewport قرار داده شده است. بنابراین، المان body کل عرض موجود در صفحه را به خود اختصاص می دهد. بنابراین اگر مرورگر به اندازه 690 پیکسل تغییر یابد، body تمام 690 پیکسل در عرض را به خود اختصاص می دهد.
واحد vh
ارتفاع قابل روئیت نیز مشابه vw ولی در ارتفاع عمل می کند. یعنی هر 1vh معادل 1 درصد از ارتفاع viewport می باشد:
div { height: 50vh; }
در کد بالا، تگ div معادل 50% از ارتفاع viewport را اشغال می کند. بنابراین اگر پنجره مرورگر 900 پیکسل ارتفاع داشته باشد، تگ div معادل 450 پیکسل از آن را اشغال خواهد کرد.
واحد ex
نام این واحد از پارامتر x-height در تایپوگرافی گرفته شده است که معادل ارتفاع حرف x در فونت می باشد. در اکثر فونت ها، ارتفاع x کوچک معادل نصف ارتفاع بزرگترین کاراکتر است. بنابراین 1ex برابر است با ارتفاع حرف x یا نصف 1em!
از آنجایی که اندازه حرف x در فونت های مختلف بسیار متغییر است، واحد ex به ندرت استفاده می شود.
واحد ch
واحد کاراکتر یا ch معادل عرض کاراکتر 0 (0 یا U+0030) در فونت تعریف می شود. هر چند این واحد به دلیل متغییر بودن در هر فونت می تواند تغییر کند، بنابراین کاربرد چندانی در CSS ندارد. برای مثال، در فونت Arial و Courier با هم اختلاف دارند.
واحد vmin و vmax
واحدهای viewport minimum و viewport maximum بر مبنای واحدهای vm و vh تعیین می شوند. 1vmin معادل 1 درصد کمترین ابعاد viewport، و 1vmax معادل 1 درصد بیشترین ابعاد viewport محاسبه می شود.
برای مثال، در مرورگری با ابعاد 1200x600، مقدار 1vmin برابر با 6px (1% از vh، چون مقدارش در 600px کمتر می شود) و 1vmax برابر با 12px (1% از vh، چون مقدارش در 1200px بیشتر می شود) است.
مطلق یا نسبی، مساله این است
واقعا مساله این نیست! مساله مهم آن چیزی است که بهترین خروجی را به یک طراح فرانت اند ارائه دهد به شکلی که تا حد ممکن به طراحی خواسته شده نزدیک شده و اصل DRY و Responsive بود را به همراه داشته باشد. بنابراین توصیه می شود براساس طرح مورد نظر، از واحدهای مختلف حداکثر بهره برداری را داشته باشید.
