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 و % هست و مقادیر معادل هر کدوم رو به سه واحد حساب کرده :

Pixel EM Percent Point
۶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

محمدرضا

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


نظر بدهید