logo-mini

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

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

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

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

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

 

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

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

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

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

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

۱in = 2.54cm = 25.4mm = 72pt

اگر خط کش دارید میتونید ارتفاع ناحیه ی سبز رنگ فوق رو اندازه بگیرید که برابر با ۱ اینچ (۲٫۵۴ سانتیمتر) هست !
واحدهایی که در باکس سبز رنگ فوق آورده شده اصطلاحا absolute units گفته می شن . یعنی اینکه اندازه ی اون ها همواره ثابت هست . چه روی کاغذ باشه ، چه روی مانیتورهایی با رزولوشن متفاوت . از این جهت که سایز صفحه نمایش مانیتورها متفاوته پیشنهاد می شه از این واحدها در صفحات وب مخصوص نمایش روی مانیتور ها استفاده نکنید. صفحه نمایش های کوچکی مثل موبایل ها ممکنه تا ۸ سانتیمتر کوچیک و صفحه نمایش بعضی مانیتور ها تا ۸۰cm هم ممکنه باشه و نمایش طول ثابت ۱ سانتیمتر در این دو ثابته ، ولی نسبت به اندازه ی اونها خیلی فرق میکنه !
:: پس بهتره از واحدهایی مثل px ، em و درصد % استفاده کنید که وابسته به اندازه ی صفحه نمایش هستند!
در زیر جدولی رو براتون آوردم که مقایسه ی بین اندازه ی ۴ واحد معروف px , pt , em و % هست و مقادیر معادل هر کدوم رو به سه واحد حساب کرده :

PixelEMPercentPoint
۶px۰٫۳۷۵em۳۷٫۵%۵pt
۷px۰٫۴۳۸em۴۳٫۸%۵pt
۸px۰٫۵em۵۰%۶pt
۹px۰٫۵۶۳em۵۶٫۳%۷pt
۱۰px۰٫۶۲۵em۶۲٫۵%۸pt
۱۱px۰٫۶۸۸em۶۸٫۸%۸pt
۱۲px۰٫۷۵em۷۵%۹pt
۱۳px۰٫۸۱۳em۸۱٫۳%۱۰pt
۱۴px۰٫۸۷۵em۸۷٫۵%۱۱pt
۱۵px۰٫۹۳۸em۹۳٫۸%۱۱pt
۱۶px۱em۱۰۰%۱۲pt
۱۷px۱٫۰۶۳em۱۰۶٫۳%۱۳pt
۱۸px۱٫۱۲۵em۱۱۲٫۵%۱۴pt
۱۹px۱٫۱۸۸em۱۱۸٫۸%۱۴pt
۲۰px۱٫۲۵em۱۲۵%۱۵pt
۲۱px۱٫۳۱۳em۱۳۱٫۳%۱۶pt
۲۲px۱٫۳۷۵em۱۳۷٫۵%۱۷pt
۲۳px۱٫۴۳۸em۱۴۳٫۸%۱۷pt
۲۴px۱٫۵em۱۵۰%۱۸pt

نتیجه ای که از این بحث گرفتیم اینه که در صفحاتی که مخصوص پرینت شدن طراحی میشن از واحد های absolute استفاده بشه تا نمایش اونها در صفحه وب و صفحه مانیتور کاملا یکسان و به یک سایز باشه . در صورتی که در صفحات وب که نمی خواید مخصوص پرینت شدن باشه از واحد های px ، % و em استفاده کنید.

 

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

محمدرضا

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


نظر بدهید