ویژگی های سی اس اس فقط می توانند مقادیر خاص مربوط به خود را قبول کنند. مقادیری مثل کلمات کلیدی, آدرس, رنگ و یا یک عدد.
زمانی که یک عدد را برای یک ویژگی تعریف می کنیم در بیشتر مواقع نیاز است تا واحد آن عدد را نیز مشخص کنیم.
خیلی از ویژگی های سی اس اس مقادیر طولی می پذیرند, مثل font-size
, margin
و یا line-height. که این مقادیر طولی می توانند با واحدهای متفاوتی معرفی شوند.
در سی اس اس چندین واحد برای بیان اندازه های طولی وجود دارد که برخی از آنها پیشینه ای در دنیای تایپوگرافی دارند: مثل واحد نقطه(pt
), برخی برگفته از واحدهایی هستند که همه روزه در محیط اطرافمان می شنویم و استفاده می کنیم: مثل سانتی متر(cm
), میلی متر(mm
). و همچنین واحدهایی که بیشتر برای دنیای کامپیوتر به ویژه سی اس اس به دنیا آمدند مثل پیکسل (px
).
در دنیای سی اس اس دو خانواده برای واحدهای طولی وجود دارند, واحدهای مطلق و واحدهای نسبی که در این مطلب با واحدهای مطلق آشنا می شویم.
واحدهای مطلق
واحدهای مطلق شامل واحدهای فیزیکی (in, cm, mm, pt, pc
) و px
می باشند.
- واحدهای فیزیکی
px
رابطه بین واحدهای فیزیکی نسبت به هم همیشه ثابت است اما در کل وابسته به یک سنجش اندازه گیری دیگر هستند که این سنجش می تواند (الف) فیزیکی باشد یا (ب) وابسته به پیکسل مرجع باشد.
رابطه بین آنها به قرار زیر است:
1in = 2.54cm = 25.4mm = 72pt = 6pc
استفاده از این واحدها برای صفحه نمایش ها توصیه نمی شود. معمولا زمانی مفید هستند که دستگاهی که قرار است آنها را نمایش دهد کاملا شناخته شده باشد, مثل پرینترها.
الف: سنجش فیزیکی زمانی اتفاق می افتد که محیط نمایشی ما پرینترها و صفحه نمایش هایی با رزولوشن بالا (high-dpi) باشند. که در این حالت یک اندازه طولی در هریک از واحدهای pc, pt, mm, cm و in به همان اندازه ای که در دنیای فیزیکی شناخته شده است ظاهر می شود ( یعنی یک سانتی متر همون یک سانتی متری هستش که خیاط محله ما باهاش کت و شلوار می دوزه کسی هم نمیخره :) ).
در این محیط ها واحد پیکسل با توجه به واحدهای فیزیکی تعیین می شود (1px = 1/96in
).
ب: و اما در محیطهایی با رزولوشن پایین (low-dpi) یک واحد پیکسل نمایانگر پیکسل مرجع است و همه واحدهای فیزیکی با توجه به پیکسل مشخص می شوند. 1in برابر با 96px خواهد بود و دیگر واحدهای فیزیکی مثل cm و غیره شاید دیگر آن مقداری که در دنیای واقعی هستند, نباشند. یعنی 1 سانتی متر روی یک دستگاه با رزولوشن پایین برابر با 1 سانتی متر بر روی کاغذ نیست.
px
درست است که px
یک واحد مطلق است اما یک واحد ثابت نیست. این واحد وابسته به دستگاه (پرینتر, صفحه نمایش) تعیین می شود. چراکه هر دستگاه می تواند یک پیکسل را هر اندازه ای که بخواهد تعیین کند تا 1px
به مقدار صحیحی که آن دستگاه نیاز دارد برسد.
برای دستگاههای عادی 1px
برابر یک پیکسل دستگاه یعنی یک نقطه روی صفحه نمایش است.
در دستگاه هایی با رزولوشن بالا و پرینترها, 1px
برابر با چندین پیکسل دستگاه می باشد. تعداد پیسکل های دستگاه برای 1px
در CSS طوری تعیین می شوند تا رابطه بین px
و in
ثابت باقی بماند. (1px = 1/96in
)
mm
این واحد همان میلیمتر معروف است :)
cm
رابطه سانتی متر با دو واحد mm
و px
بصورت زیر است:
1cm = 10mm = 37.8px
in
رابطه یک اینچ با دو واحد cm
و px
بصورت زیر است:
1in = 2.54cm = 96px
pt
یک واحد point یا نقطه برابر است 1/72 یک اینچ.
1pt = 1/72in
خارج از دنیای سی اس اس نقطه رایج ترین واحد برای تعیین اندازه فونت سایز می باشد. به همین دلیل است که بهتر است زمانی که برای پرینترها در سی اس اس استایل می نویسیم از pt
استفاده کنیم.
pc
هر pc
برابر با 12 نقطه است.
1pc = 12pt
در دموی زیر با تغییر مقادیر واحدهای مختلف با این واحدها بیشتر آشنا شوید:
See the Pen Absolute Length Units by Mojtaba Seyedi (@seyedi) on CodePen.
سلام و خسته نباشید
همون طور که فرمودید هر 96 پیکسل یک اینچ هست . این یک استاندارد؟؟ و در همه مانیتور ها به این صورت هستش؟
مانیتور من 2560 در 1080 و 25 اینچ وقتی حساب کتاب کنیم میشه حدود 111 پیکس در هر اینچ و لپ تاپ هم با سایز 1920*1080 میشه 144 پیکس در اینچ و هر صفحه نمایش به صفحه نمایش دیگه فرق میکنه.
با این گفته ها دو سه تا سوال داشتم.
1.ایا 96 پیکسل در هر اینچ یک استاندارد؟
2.هر پیکسل رو شرکت سازنده مانیتور یا موبایل بر چه اساسی اندازه میده ؟هر کی هر چی دلش خواست میده؟؟
3.وقتی برای مثال مانتیور من 111 پیکسل بر اینچ هست ، ایا مرورگر ها هم سایت رو با همین مقدار پیکسل در اینچ باز می کنند یا نه به صورت مجازی خودشون پیکسل کم و زیاد می کنند؟ایا در هر مرورگر روال حساب کتاب پیکسل فرق داره؟
و در آخر من یک ازمایشی کردم در فتوشاپ وقتی سندی با سایز یک در یک اینچ میسازیم 96 در 96 پیکسل هستش در حالی که مانیتور من همون طور که گفتم 1 اینچش 111 پیکسل در 111 پیکسل هستش.
ممنون میشم در صورت امکان توضیح بفرمایید.
سلام. توجه کنید که ما اینجا داریم توی دنیای CSS بحث می کنیم. پیکسلی که در سی اس اس وجود داره هیچ ربطی به پیکسل روی مانیتورها نداره. این فقط یک تشابه نام هستش. px دنیای سی اس اس اگر بخوایم دقیقتر بشیم یک واحد خطی نیست بلکه یک واحد زاویه ای هستش. این فقط یک تشابه اسمی هستش. پس پیکسل دنیای مانیتور ها رو با دنیای سی اس اس اشتباه نگیرید. این یعنی اون رابطه بین اینچ و پیکسل فقط مربوط به سی اس اس هستش نه مانیتورها… و بله یک استاندارد هستش
در مورد نحوه برخورد مرورگرها و پیسکل مرجع مطالب پیشنیاز وجود داره که جاش توی یک کامنت نیست. ان شالله در آینده یک مطلب کامل در مورد مفاهیم dpi و غیره خواهیم داشت و اونجا پیسکل مرجع رو هم بررسی می کنیم.
موفق باشید.
سلام
شما در همین آموزش فرمودید که در مانیتور های low dpi هر اینچ برابر با 96 پیکسل هستش
و در اینجا میگید که این تبدیل واحد فقط مربوط به دنیای css هست و هیچ ارتباطی با دنیای مانیتور ها نداره.
لطفا کمی توضیح بدید در این مورد
و اینکه اگر واحد ها در هر جایی با جای دیگر فرق دارن مثلا در css و مانیتور ها ، در این صورت چطور میشه یک گرافیگی رو برای یک سایت یا مثلا یک اپ اندروید ایجاد کرد که واحد های مجازی با واحد های فیزیکی مانیتور ها و صفحات لمسی همخوانی داشته باشن و سرریز نکنن و نمایش اونها با بی نظمی مواجه نشه؟
شما کدتون رو بنوسید، طراحیتون رو هر جا دوست دارید با css انجام بدید بقیه پلتفرم ها می دونن چطوری طرح و اندازه های شما رو مدیریت کنند.
فقط توی تگ head تگ زیر رو با همون مقادیر قرار بدید:
<meta name="viewport" content="width=device-width, initial-scale=1">
لطفا کمی هم در مورد پیکس مرجع بیشتر توضیح بدید هیچ جای وب فارسی در مورد این مطلب ننوشته
سلام
چرا با pt کار نکنیم؟
و یه سوال:
چرا pt و cm تو هر دستگاه یه اندازه متفاوت است؟ مگه نباید ثابت باشد؟
قاعدتا بروزرها باید براساس عرض پیکسل اون نمایشگر، تنظیم کنن که چندتا پیکسل نمایشگر رو روشن کنن میشه یک cm
ممنون
سلام. لطفا مطلب درباره ی dpi و واحد مرجع را هم بنویسید خیلی کنجکاو شدیم. ممنون.