illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

32646 ۳۰ بهمن ۹۰

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 12 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۳۰ بهمن ۱۳۹۰)

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۲ فروردین ۱۳۹۱)

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

      • ‏‏

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

        • ‏‏
          لقمان آوند(۲۲ فروردین ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏
      محمدسینا معراجیان(۲۴ تیر ۱۳۹۱)

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

  • ‏‏
    پویا(۵ دی ۱۳۹۱)

    حرف نداشت.

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram