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

پادکست 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 محاسبه خواهد شد.

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

• هنگام تنظیم مقادیر برای فیلترها: 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 است.

ابعاد و طول

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

طول های مطلق

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

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

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

طول های نسبی

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

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

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

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

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

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

واحدهای نسبی viewport جایگزین

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

واحدهای مربوط به کانتینر

شما می توانید از ابعاد ظرف یک عنصر به عنوان مبنای نسبی استفاده کنید. این واحدها فضای کانتینر موجود را تقسیم می کنند. اینها در داخل کوئری های ظرف برای تنظیم اندازه فونت بر اساس فضای موجود مفید هستند.

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

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

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

در ماژول رنگ ، واحدهای زاویه را بررسی کردیم که برای تعریف مقادیر درجه، مانند رنگ در 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');
  }
}

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

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

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

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

منابع

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