پادکست 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)
یک فیلتر sepia50%
را روی عنصر اعمال می کند. - هنگام تنظیم 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
برای اندازه عنصر خود استفاده می کنید و سپس چاپ می کنید، اگر آن را با خط کش مقایسه کنید باید دقیق باشد.
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" در فونت و اندازه محاسبه شده تجاوز کند.
واحدهای متفرقه
واحدهای دیگری نیز وجود دارند که برای مقابله با انواع خاصی از مقادیر مشخص شده اند.
واحدهای زاویه
در ماژول رنگ ، واحدهای زاویه را بررسی کردیم که برای تعریف مقادیر درجه، مانند رنگ در 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
مخفف نقطه در اینچ است. یک زمینه مفید برای این کار، تشخیص صفحههای با وضوح بسیار بالا، مانند نمایشگرهای شبکیه چشم در یک پرسش رسانهای و ارائه یک تصویر با وضوح بالاتر است.
درک خود را بررسی کنید
دانش خود را در مورد اندازه گیری آزمایش کنید
کدام یک از ابعاد زیر معتبر است؟
واحدهای مطلق و نسبی چگونه متفاوت هستند؟
واحدهای Viewport مطلق هستند.