واحدهای اندازه گیری

پادکست CSS - 008: Sizing Units

وب یک رسانه پاسخگو است، اما گاهی اوقات می خواهید ابعاد آن را کنترل کنید تا کیفیت کلی رابط را بهبود بخشید. یک مثال خوب برای این، محدود کردن طول خط برای بهبود خوانایی است. چگونه این کار را در یک رسانه انعطاف پذیر مانند وب انجام می دهید؟

برای این مورد، می توانید از یک واحد ch استفاده کنید که برابر با عرض یک کاراکتر "0" در فونت رندر شده در اندازه محاسبه شده آن است. این واحد به شما امکان می دهد عرض متن را با واحدی که برای اندازه متن طراحی شده محدود کنید، که به نوبه خود امکان کنترل قابل پیش بینی را بدون توجه به اندازه آن متن فراهم می کند. واحد ch یکی از معدود واحدهایی است که برای زمینه های خاص مانند این مثال مفید است.

اعداد

از اعداد برای تعریف opacity ، line-height و حتی برای مقادیر کانال رنگ در rgb استفاده می شود. اعداد اعداد صحیح بدون واحد (1، 2، 3، 100) و اعشاری (0.1، 0.2، 0.3) هستند.

اعداد بسته به بافتشان معنی دارند. به عنوان مثال، هنگام تعریف line-height ، یک عدد نماینده یک نسبت است اگر آن را بدون واحد پشتیبانی تعریف کنید:

p {
  font-size: 24px;
  line-height: 1.5;
}

در این مثال، 1.5 برابر با 150 درصد اندازه قلم پیکسل محاسبه شده عنصر p است. این بدان معنی است که اگر font-size p 24px باشد، ارتفاع خط به صورت 36px محاسبه خواهد شد.

توجه: ایده خوبی است که به جای تعیین واحد، از مقدار بدون واحد برای line-height استفاده کنید. همانطور که در ماژول وراثت یاد گرفتید، font-size می توان به ارث برد. تعریف line-height بدون واحد، ارتفاع خط را نسبت به اندازه قلم حفظ می کند. این تجربه بهتری را نسبت به مثلاً line-height: 15px ارائه می دهد، که تغییر نمی کند و ممکن است با اندازه فونت های خاص عجیب به نظر برسد.

اعداد را می توان در مکان های زیر نیز استفاده کرد:

• هنگام تنظیم مقادیر برای فیلترها: filter: sepia(0.5) یک فیلتر sepia 50% را روی عنصر اعمال می کند.
• هنگام تنظیم Opacity: opacity: 0.5 یک کدورت 50% اعمال می کند.
• در کانال های رنگی: rgb(50, 50, 50) ، که در آن مقادیر 0-255 برای تنظیم مقدار رنگ قابل قبول است. درس رنگ را ببینید .
• برای تبدیل یک عنصر: transform: scale(1.2) عنصر را 120% از اندازه اولیه آن مقیاس می کند.

درصدها

هنگام استفاده از درصد در CSS باید بدانید که چگونه درصد محاسبه می شود. به عنوان مثال، width به عنوان درصدی از عرض موجود در عنصر والد محاسبه می شود.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

در مثال بالا، عرض div p 150px است، با این فرض که چیدمان box-sizing: content-box .

اگر margin یا padding به صورت درصد تنظیم کنید، بدون توجه به جهت، بخشی از عرض عنصر والد خواهد بود.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

در قطعه بالا، هر دو margin-top و padding-left تا 150px محاسبه می شوند.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

اگر مقدار transform را به صورت درصد تنظیم کنید، بر اساس عنصر با مجموعه تبدیل است. در این مثال، p دارای مقدار translateX 10% و width 50% است. ابتدا، عرض را محاسبه کنید: 150px زیرا 50٪ عرض والد آن است. سپس، 10% از 150px را بگیرید، که 15px است.

عبارت کلیدی: ویژگی transform به شما امکان می دهد ظاهر و موقعیت یک عنصر را با چرخش، انحراف، مقیاس گذاری و ترجمه آن تغییر دهید. این کار را می توان در فضای دو بعدی و سه بعدی انجام داد.

ابعاد و طول

اگر یک واحد را به یک عدد متصل کنید، تبدیل به یک بعد می شود. به عنوان مثال، 1rem یک بعد است. در این زمینه، واحدی که به یک عدد متصل می‌شود، در مشخصات به عنوان نشانه ابعاد نامیده می‌شود. طول ها ابعادی هستند که به فاصله اشاره دارند و می توانند مطلق یا نسبی باشند.

طول های مطلق

همه طول‌های مطلق در برابر یک پایه حل می‌شوند و در هر جایی که در CSS شما استفاده می‌شوند قابل پیش‌بینی هستند. به عنوان مثال، اگر از cm برای اندازه عنصر خود استفاده می کنید و سپس چاپ می کنید، اگر آن را با خط کش مقایسه کنید باید دقیق باشد.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

اگر این صفحه را چاپ کرده باشید، div به صورت یک مستطیل سیاه 10x5 سانتی متری چاپ می شود. به خاطر داشته باشید که CSS نه تنها برای محتوای دیجیتال، بلکه برای استایل دادن به محتوای چاپی نیز استفاده می شود. طول مطلق واقعاً می تواند هنگام طراحی برای چاپ مفید باشد.

واحد	نام	معادل با
سانتی متر	سانتی متر	1cm = 96px/2.54
میلی متر	میلی متر	1 میلی متر = 1/10 از 1 سانتی متر
س	ربع میلی متر	1Q = 1/40 از 1 سانتی متر
در	اینچ	1 اینچ = 2.54 سانتی متر = 96 پیکسل
کامپیوتر	پیکاها	1 عدد = 1/6 از 1 اینچ
pt	امتیاز	1pt = 1/72 از 1 اینچ
px	پیکسل ها	1 پیکسل = 1/96 از 1 اینچ

طول های نسبی

طول نسبی در برابر یک مقدار پایه محاسبه می شود، بسیار شبیه یک درصد. تفاوت بین اینها و درصدها در این است که می توانید عناصر را به صورت متنی اندازه کنید. این بدان معنی است که CSS دارای واحدهایی مانند ch است که از اندازه متن به عنوان پایه استفاده می کند و vw که بر اساس عرض درگاه نمایش (پنجره مرورگر شما) است. طول های نسبی به دلیل ماهیت پاسخگویی آن در وب بسیار مفید هستند.

واحدهای مربوط به اندازه قلم

CSS واحدهای مفیدی را ارائه می دهد که نسبت به اندازه عناصر تایپوگرافی رندر شده است، مانند اندازه خود متن ( واحدهای em ) یا عرض کاراکترهای حروف چاپی (واحدهای ch ).

واحد	نسبت به:
ما	نسبت به اندازه فونت، یعنی 1.5em 50 درصد بزرگتر از اندازه قلم پایه محاسبه شده والد آن خواهد بود. (از نظر تاریخی ارتفاع حرف بزرگ «م»).
سابق	اکتشافی برای تعیین اینکه آیا از x-height، یک حرف "x" یا ".5em" در اندازه فونت محاسبه‌شده فعلی عنصر استفاده شود.
درپوش	ارتفاع حروف بزرگ در اندازه فونت محاسبه شده فعلی عنصر.
فصل	میانگین پیشروی کاراکتر یک علامت باریک در فونت عنصر (که با علامت "0" نشان داده می شود).
آی سی	میانگین پیشروی نویسه یک علامت تمام عرض در فونت عنصر، همانطور که با علامت "水" (ایدئوگراف آب CJK، U+6C34) نشان داده شده است.
رم	اندازه قلم عنصر ریشه (پیش‌فرض 16 پیکسل است).
lh	ارتفاع خط عنصر
rlh	ارتفاع خط عنصر ریشه

واحدهای مربوط به Viewport

می توانید از ابعاد ویوپورت (پنجره مرورگر) به عنوان مبنای نسبی استفاده کنید. این واحدها فضای دید در دسترس را افزایش می دهند.

واحد	نسبت به
vw	1% از عرض درگاه دید. مردم از این واحد برای انجام ترفندهای جالب فونت، مانند تغییر اندازه فونت هدر بر اساس عرض صفحه استفاده می‌کنند تا با تغییر اندازه کاربر، اندازه فونت نیز تغییر کند.
vh	1% ارتفاع درگاه دید. اگر مثلاً نوار ابزار فوتر دارید، می‌توانید از این برای مرتب کردن موارد در یک رابط کاربری استفاده کنید.
vi	1% از اندازه نمای در محور درون خطی عنصر ریشه . Axis به حالت های نوشتن اشاره دارد. در حالت های افقی نوشتن مانند انگلیسی، محور درون خطی افقی است. در حالت های نوشتاری عمودی مانند برخی از حروف چاپی ژاپنی، محور درون خطی از بالا به پایین اجرا می شود.
vb	1% از اندازه نمای در محور بلوک عنصر ریشه . برای محور بلوک، این جهت بودن زبان خواهد بود. زبان های LTR مانند انگلیسی دارای یک محور بلوک عمودی هستند، زیرا خوانندگان زبان انگلیسی صفحه را از بالا به پایین تجزیه می کنند. حالت نوشتن عمودی دارای یک محور بلوک افقی است.
vmin	1٪ از ابعاد کوچکتر نمای.
vmax	1٪ از ابعاد بزرگتر نمای.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

در این مثال، div 10% از عرض نمای پورت خواهد بود زیرا 1vw 1% از عرض نمای درگاه است. عنصر p دارای max-width 60ch است که به این معنی است که نمی تواند از عرض 60 کاراکتر "0" در فونت و اندازه محاسبه شده تجاوز کند.

هدف: با اندازه‌گیری متن با واحدهای نسبی مانند em یا rem ، به جای یک واحد مطلق، مانند px ، اندازه متن شما می‌تواند به ترجیحات کاربر پاسخ دهد. این می تواند شامل اندازه فونت سیستم یا اندازه قلم عنصر والد، مانند <body> باشد. اندازه پایه em والد عنصر و اندازه پایه rem اندازه فونت پایه سند است. اگر font-size روی عنصر html خود تعریف نکنید، اگر از طول های نسبی مانند em و rem استفاده کنید، این اندازه فونت سیستمی که کاربر ترجیح می دهد رعایت می شود. اگر از واحدهای px برای اندازه‌گیری متن استفاده می‌کنید، این اولویت نادیده گرفته می‌شود.

واحدهای متفرقه

واحدهای دیگری نیز وجود دارند که برای مقابله با انواع خاصی از مقادیر مشخص شده اند.

واحدهای زاویه

در ماژول رنگ ، واحدهای زاویه را بررسی کردیم که برای تعریف مقادیر درجه، مانند رنگ در hsl مفید هستند. آنها همچنین برای چرخاندن عناصر در توابع تبدیل مفید هستند.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

با استفاده از واحد زاویه deg ، می توانید یک div 90 درجه روی محور مرکزی آن بچرخانید.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

توجه: واحدهای زاویه دیگر عبارتند از rad (رادیان)، grad (گرید) و واحدهای turn که نشان دهنده بخشی از یک زاویه است که در آن 1turn = 360deg و 0.5turn = 180deg است.

واحدهای رزولوشن

در مثال قبلی مقدار min-resolution 192dpi است. واحد dpi مخفف نقطه در اینچ است. یک زمینه مفید برای این کار، تشخیص صفحه‌های با وضوح بسیار بالا، مانند نمایشگرهای شبکیه چشم در یک پرسش رسانه‌ای و ارائه یک تصویر با وضوح بالاتر است.

درک خود را بررسی کنید

دانش خود را در مورد اندازه گیری آزمایش کنید

کدام یک از ابعاد زیر معتبر است؟

سانتی متر

سانتی متر، یک بعد مطلق معتبر.

رابط کاربری

رابط کاربری یک بعد در CSS نیست.

در

اینچ، یک بعد مطلق معتبر.

8

بعد CSS نیست

px

پیکسل، یک بعد مطلق معتبر.

فصل

واحدهای شخصیت، یک بعد نسبی معتبر.

ux

تجربه کاربری یک بعد در CSS نیست.

ما

واحدهای حرف M، یک بعد نسبی معتبر.

سابق

واحدهای حرف x، یک بعد نسبی معتبر.

واحدهای مطلق و نسبی چگونه متفاوت هستند؟

مقادیر مطلق نمی توانند تغییر کنند اما واحدهای نسبی می توانند تغییر کنند

مقادیر مطلق می توانند تغییر کنند، اما مبنایی که آنها بر اساس آن محاسبه می کنند نمی تواند.

طول مطلق در برابر یک مقدار پایه مشترک محاسبه می شود، که در آن یک واحد نسبی با مقدار پایه ای که می تواند تغییر کند مقایسه می شود.

واحدهای نسبی به دلیل آگاهی زمینه‌ای خود سازگارتر و سیال‌تر هستند، اما یک قدرت و قابلیت پیش‌بینی برای واحدهای مطلق وجود دارد که می‌تواند برای طرح‌های خاص پایه‌ای باشد.

واحدهای Viewport مطلق هستند.

درست است

آنها ممکن است کاملاً احساس کنند، اما نسبت به یک viewport هستند که می تواند یک iframe یا webview باشد و همیشه نماینده اندازه صفحه نمایش دستگاه نیست.

نادرست

آنها نسبت به پنجره سندی هستند که در آن ایجاد شده اند، که ممکن است مانند صفحه نمایش دستگاه باشد یا نباشد.

منابع

• مقادیر و واحدهای مشخصات CSS سطح 4
• اندازه و واحدها در MDN
• همه چیز درباره Ems
• توضیح دهنده درصدها