واحد‌های اندازه گیری در CSS

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

لیستی این واحد‌های اندازه گیری به شرح زیر اشت:

1. واحدهای اندازه‌‌گیری نسبی (Relative Lengths)
   • em
   • ex
   • ch
   • rem
   • vw
   • vh
   • vmin
   • vmax
   • %
   • px
2. واحد‌های اندازه‌گیری مطلق (Absolute Lengths)
   1. cm
   2. mm
   3. in
   4. pt
   5. pc

 

استفاده از em

این واحد اندازه‌گیری معمولا برای تایپوگرافی استفاده می‌شود. مبنای اندازه در یک تایپ‌فیس اندازه حرف M بزرگ انگلیسی هست.

div {
	width: 40em;
}

۱em برابر است با: 

۱em = 16px = 0.17in = 12pt == 1pc = 4.2mm = 0.42cm

 

استفاده از ex

از ex جهت تعیین اندازه x-height به صورت نسبی برای فونت‌ها استفاده می‌شود. x-height ارتفاع فونت‌ها را بر مبنای حرف x کوچک انگلیسی تعیین می‌نماید.

 

استفاده از ch

واحد ch شبیه ex هست با این تفاوت که با تغییر font-family تغییر می‌کند.

div {
	width: 60ch;
}

 

استفاده از rem

واحد اندازه گیری rem مشابه em است، اما همیشه از المان اصلی ریشه (root) ارث‌ می‌برد. منظور از المان اصلی ریشه در یک ساختار استاندارد همان المان HTML است. برای درک بهتر تفاوت rem با em تصویر زیر را مشاهده کنید.

 

استفاده از vw

مبنای این اندازه‌گیری ۱٪ از اندازه عرض viewport هست. با توجه به اینکه viewport ممکن است در دستگاه‌های مختلف (مونیتور، تبلت، گوشی و … ) متغییر باشد، استفاده از vw در تعیین اندازه مفید خواهد بود. منظور از Veiwport همان اندازه نمایش مرورگر است و اگر برای مثال این اندازه ۱۲۸۰ پیکسل باشد وقتی ما اندازه ۳vw را برای المان خودمان تعریف کنیم با توجه به عدد ۱۲۸۰ باید اندازه حدود ۳۸٫۴px را داشته باشیم. البته مشخص است که این عدد با تغییر اندازه صفحه مرورگر تغییر خواهد کرد.

 

استفاده از vh

تمامی موارد گفته شده برای vw برای vh هم صدق می‌کند با این تفاوت که این بار ارتفاع viewport مد نظر خواهد بود.

 

استفاده از vmin و vmax

این واحد مورد تکمیلی برای تعیین اندازه با viewport است. در واقع اگر شما از vmin استفاده کنید در بین ارتفاع و عرض viewport اندازه‌ی کوچکتر به عنوان مبنا انتخاب خواهد شد. در مقابل vmax بین عرض و ارتفاع، اندازه بزرگتر را به عنوان مبنا قرار خواهد داد.

 

استفاده از %

واحد اندازه‌گیری درصد بر مبنای اندازه المان والد تعیین می‌شود.

 

استفاده از px

حس می‌کنم این واحد اندازه گیری به قدری استفاده شده که نیازی به توضیح ندارد 🙂

 

استفاده از cm و mm و in

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

۱cm = 37.8px

     

۱mm = 3.78px

    

۱in = 96px

استفاده از pt

شما می‌توانید از point برای تعیین اندازه المان‌ها یا فونت استفاده کنید. در واقع point یک واحد اندازه‌گیری فیزیکی است و هر point معادل ۱/۷۲ اینچ هست.

 

استفاده از pc

داستان pica یا همان pc هم مانند point هست. هر pc معادل دوازده point هست. 

۱pc == 12pt

 

نتیجه:

این که کدام یک از اینها در کجا کاربرد دارند و یا در کجا استفاده می‌شوند کاملا به خود شما بستگی دارد. شما باید بر اساس نوع محتوا ،‌صفحه نمایش‌های مختلف و موارد دیگر تصمیم بگیرید. فقط توجه کنید که قبل از استفاده از آنها در صورت نیاز از سایت Can I Use  بررسی کنید که چه مرورگرهایی آنها را پشتیبانی می‌کند.

منابع: + + +