مقایسه واحدهای سایز در CSS‏ ( px , pt , em , % , in , cm , mm)

- visibility ١٢ mode_comment

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

comment دیدگاه کاربران
restless

لقمان جان،ممنون مث همیشه عالی …موفق باشی!! 😉

p30source

شنبه و یکشنبه از پس هم آمدند و رفتند ما فراموش شده ایم…. 😆

لقمان آوند

سلام
حمزه جان قبلا گفتم که اینواضافه کن :
img.aligncenter {display: block;margin: 5px 50% 5px 50%;}
اونو به این شکل دربیار ، درست میشه :
img.aligncenter {display: block;margin: 0 auto;}

p30source

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

لقمان آوند

مشکلی نیست . هر وقت خواستی بگو .

ebrahimyou

سلام دوستان من با نرم افزار easy button
که منو های کشویی زیبایی میشه ساخت. ولی نمیتونم راست سایتم بیارمش اگر کسی بلده حتما بهم بکه ممنون میشم اینم ایدی منهamiryuo@yahoo.com
اینم لینک دانلود نرم افزاره با سپاس.
www.blumentals.net/download/btnmenu2.exe

لقمان آوند

سلام
اینجور برنامه ها بعد از طراحی منو یه قسمتی داره که کدشو بهت میدن . روی دکمه insert into web page در بالای برنامه کلیک کن ببین اونجا نیست این کده .

ebrahim

سلام خیلی ممنون که جواب دادی داداش.
اینوinsert into web داره کدشو هم میده من تو سایتم انداختم ولی منوش هر کاری که میکنم به سمت راست نمیره موندم چیکار کنم از بست که دنبالش رفتم تا بتونم راست صفحه قرارش بدم خسته شدم مشگلم فقط اینه که سمت راست نمیاد. 🙄

لقمان آوند

شما منو رو بزار تو وبلاگت بعد آدرسشو بده من ببینم بهت بگم چیکار کنی .

farzaneh

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

محمدسینا معراجیان

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

پويا

حرف نداشت.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.