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

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

اگر با زبان CSS آشنایی داشته باشید حتما میدونید که بعضی از ویژگی های این زبون مقداری رو به عنوان اندازه ی طولی اون ویژگی می پذیرند . ویژگی هایی مثل width , height , font-size و امثالهم !  برای این اندازه ها واحدهای مختلفی در نظر گرفته شده . امروز می خوایم در این مقاله در مورد انواع مختلف واحدهای اندازه در CSS صحبت کنیم .

واحدهای اندازه گیری در CSS  واحدهای اندازه گیری در css واحدهای اندازه گیری در CSS Units of measurement in CSS

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

مرورگرها یک اندازه ی پیش فرض برای تمامی فونت ها در نظر میگیرند ، تا در زمانی که برای صفحه ی وب اندازه فونت تعیین نشده بود ، بدون مشکل فونت ها نمایش داده بشه .

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

PX : پیکسل (pixel) واحد اندازه گیری معمول در طراحی وب هست که اکثر کدنویسان از این واحد اندازه گیری استفاده می کنند .

% : Percentage واحد درصدی هست که در طراحی رسپانسیو و واکنشگرا به شدت استفاده میشه .

em : واحدی هست که اندازه آن به اندازه ی فونت پدر تگ جاری بستگی داره . به عنوان مثال اگر اندازه ی فونت یک تگ برابر با ۱۰ پیکسل باشه و اندازه فونت تگی که درون این تگ قرار داره به اندازه ی ۲em تعیین شده باشه ، اندازه ی فونت تگ فرزند دو برابر تگ پدر میشه ، یعنی ۲۰ پیکسل .

rem : مشکلی که واحد em داره اینکه سایزش نسبت به عنصر والد تعیین میشه و ممکنه دچار مشکل بشید ، برای حل این مشکل میتونید در کنار em از rem هم استفاده کنید . واحد rem هم مثل em عمل میکنه با این تفاوت که سایز فونت نسبت به سایز تعیین شده برای عنصر root مشخص میشه (مثل html , body) .

نکته : علاوه بر فونت شما میتونید از این واحد ها برای width , height , padding , margin و سایر اندازه گیری ها در css استفاده کنید .

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

توضیح داده شده :

  پیشنهاد میشه پیشنهاد نمیشه !
استفاده برای نمایش در وب em, px, % pt, cm, mm, in
استفاده برای چاپ روی کاغذ em, cm, mm, in, pt, %  

در جدول زیر میتونید واحدهای اندازه گیری رو ببینید :

واحد توضیحات
% درصد
in اینچ
cm سانتی متر
mm میلی متر
em یک em یعنی اندازه کنونی سایز (که از تگ پدر ارث برده). ۲em یعنی دو برابر اندازه به ارث برده شده از تگ پدر و …
pt point ، هر ۱pt برابر است با ۱/۷۲ اینچ
px پیکسل ، یک پیکسل یک نقطه روی صفحه نمایش مانیتور محسوب میشه

:: رابطه ی بین واحدهای معروف استفاده شده به شکل زیر می باشد :

اگر خط کش دارید میتونید ارتفاع ناحیه ی سبز رنگ فوق رو اندازه بگیرید که برابر با 1 اینچ (2.54 سانتیمتر) هست !

واحدهایی که در باکس سبز رنگ فوق آورده شده اصطلاحا absolute units گفته می شن . یعنی اینکه اندازه ی اون ها همواره ثابت هست . چه روی کاغذ باشه ، چه روی مانیتورهایی با رزولوشن متفاوت . از این جهت که سایز صفحه نمایش مانیتورها متفاوته پیشنهاد می شه از این واحدها در صفحات وب مخصوص نمایش روی مانیتور ها استفاده نکنید. صفحه نمایش های کوچکی مثل موبایل ها ممکنه تا 8 سانتیمتر کوچیک و صفحه نمایش بعضی مانیتور ها تا 80cm هم ممکنه باشه و نمایش طول ثابت 1 سانتیمتر در این دو ثابته ، ولی نسبت به اندازه ی اونها خیلی فرق میکنه !
:: پس بهتره از واحدهایی مثل px ، em و درصد % استفاده کنید که وابسته به اندازه ی صفحه نمایش هستند!
در زیر جدولی رو براتون آوردم که مقایسه ی بین اندازه ی 4 واحد معروف px , pt , em و % هست و مقادیر معادل هر کدوم رو به سه واحد حساب کرده :

Pixel EM Percent Point
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt
در صفحاتی که مخصوص پرینت شدن طراحی میشن از واحد های absolute استفاده بشه تا نمایش اونها در صفحه وب و صفحه مانیتور کاملا یکسان و به یک سایز باشه . در صورتی که در صفحات وب که نمی خواید مخصوص پرینت شدن باشه از واحد های px ، % و em استفاده کنید.

در 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 بزرگ انگلیسی هست.

1em برابر است با: 

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

استفاده از ex

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

واحدهای اندازه گیری در CSS واحدهای اندازه گیری در css واحدهای اندازه گیری در CSS x height3

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

استفاده از ch

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

استفاده از rem

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

li-rem واحدهای اندازه گیری در css واحدهای اندازه گیری در CSS li rem

استفاده از vw

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

استفاده از vh

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

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

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

استفاده از %

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

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

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

1cm = 37.8px      1mm = 3.78px     1in = 96px

استفاده از pt

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

استفاده از pc

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

1pc == 12pt

این که کدام یک از اینها در کجا کاربرد دارند و یا در کجا استفاده می‌شوند کاملا به خود شما بستگی دارد. شما باید بر اساس نوع محتوا ،‌صفحه نمایش‌های مختلف و موارد دیگر تصمیم بگیرید.

 

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید

WordPress spam blocked by CleanTalk.