logo-mini

مقایسه واحدهای سایز در CSS‏

به اشتراک گذاری این پست

مقایسه واحدهای سایز در CSS‏

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

:: در ابتدا جدول پرکاربردترین واحدهای استفاده شونده در CSS رو براتون قرار میدیم که می تونید در زیر ببینید :

 

واحد توضیح
% درصد
in اینچ
cm سانتیمتر
mm میلیمتر
em یک em یعنی اندازه کنونی سایز (که از تگ پدر ارث برده). 2em یعنی دو برابر اندازه به ارث برده شده از تگ پدر و …
pt یک پوینت معادل 1.74 اینچ است .
pc یک پیکا معادل 12 پوینت است .
px پیکسل – یک نقطه در صفحه نمایش – وابسته به اندازه و رزولوشن تصویر

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

:: ضمنا واحدهایی که برای استفاده در صفحات وب برای نمایش روی صفحه مانیتور بکار میره با وحدهایی که در صفحات مخصوص پرینت شدن روی کاغذ استفاده میشه معمولا متفاوته و بهتره برای هر کدوم از مجموعه ای که در جدول زیر براتون آوردم استفاده بشه :

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

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

1in = 2.54cm = 25.4mm = 72pt

اگر خط کش دارید میتونید ارتفاع ناحیه ی سبز رنگ فوق رو اندازه بگیرید که برابر با 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 استفاده کنید.

 

اطلاعات  بیشتر در  : http://www.w3schools.com/cssref/css_units.asp

محمدرضا محمودی

محمدرضا محمودی هستم ، سعی شده در این وبلاگ مطالب مفید و کارامدی قرار بگیره ، از اینکه وقت میگذارید و مطالب رو مطالعه میکنید متشکرم... حتما نظرات خودتون رو ارسال کنید


نظر بدهید