واحدهای اندازه CSS مقادیر عددی هستند که برای مشخص کردن اندازه ویژگی‌هایی مانند margin, height, padding و font-size مورد استفاده قرار می‌گیرند.
padding: 10px; margin: 2em; font-size: 1rem; width: 12%;
برای مثال در اینجا padding ویژگی و مقدار آن برابر با 10px است.
۳ نوع اندازه در CSS داریم که عبارتند از:
۱. ثابت
۲. نسبی (وابسته)
۳. محدوده دید – viewport (در زیر مجموعه واحدهای نسبی قرار دارد)
واحدهای ثابت
واحدهای ثابت همه جا ثابت هستند حتی زمانی که دستگاه نمایش دهنده رزولوشن بیشتری داشته باشد. من به هیچ چیز وابسته نیستم و محکم سر جام نشستم!
در دستگاه های با رزولوشن بالا مانند پرینتر لیزری، 1 سانتی‌متر باید دقیقا 1 سانتی‌متر باشد. اما در دستگاههای با رزولوشن پایینتر مانند لپ‌تاپ نتیجه کمی متفاوت خواهد بود. برای دیدن عملی این تفاوت مربعی با مشخصات width:3cm و height:3cm بسازید و بعد سعی کنید با خط‌کش آن را اندازه بگیرید تا تفاوت را عینا ببینید.
شاید شما با مقادیر ثابت سرو کار داشته باشید. مثلا وقتی سندی برای پرینت آماده می‌کنید یا در نرم‌افزارهایی مثل Adobe InDesigne جلد یک کتاب را طراحی می‌کنید، باید مقادیر ثابت باشند تا موقع چاپ اندازه‌ها دقیقا همان چیزی باشند که طراحی کرده ایم.
مقادیر ثابت در امر چاپ اسناد و کتاب بسیار کاربردی هستند.
مقادیر ثابت عبارتند از:
cm
1cm = 96px/2.54
in
1in = 2.54cm
pt
1pt = 1/72nd of 1in
px
1px = 1/96th of 1in
پیکسل (Pixel): پیکسل از جمله مقادیر ثابت است که استفاده از آن در دستگاههای دیجیتالی بسیار شایع است. زمانی از پیکسل در CSS استفاده می‌کنیم که قصد داریم اندازه‌ای در حالتهای مختلف یکسان باشد. بنابراین بهتر است در طراحی ریسپانسیو که اندازه‌ها بر حسب اندازه مرورگر یا دستگاه نمایش تغییر می‌کنند، استفاده از آن توصیه نمی‌شود.
واحدهای نسبی
مقادیر نسبی در CSS، اندازه را بر حسب اندازه دیگری محاسبه می‌کنند، به این معنی که مقادیر نسبی به چیز دیگری در عناصر والد وابسته هستند، مثل فونت یا اندازه محدوده دید (viewport).
مزیت استفاده از مقادیر نسبی(وابسته) اینست که می‌توانیم اندازه فونت، padding ، یا اندازه سایر عناصر وابسته به چیز دیگری در صفحه باشد. با هم واحدهای پرکاربرد در طراحی و توسعه وب را مرور می‌کنیم:
em
اندازه پیشفرض فونت در صفحات اچ‌تی‌ام‌ال، 16px است و 1em برابر است با 16px. در سی‌اس‌اس 1em برابر است با مقداری که ویژگی font-size داده می‌شود. اگر اندازه فونت را برابر را 14px قرار دهیم، 1em برابر با 14px خواهد بود.
اگر از واحد em در طراحی خود استفاده کنید و بعد تصمیم بگیرید که اندازه فونت را بزرگتر یا کوچکتر کنید، اندازه‌های em در ساختار طراحی شما متناسب با آن تغییر خواهند کرد.
در مثال زیر به نشان میدهم که چطور با تغییر اندازه فونت، اندازه عناصری از واحد em استفاده کرده بودند، تغییر می‌کند.
html
<div class="box1"></div> <div class="box2"></div>
css
.box1 {
border: 4px solid #ccc;
margin-bottom: 20px;
font-size: 16px;
width: 3em;
height: 3em;
box-sizing: border-box;
}
.box2 {
border: 4px solid #ccc;
font-size: 32px;
width: 3em;
height: 3em;
box-sizing: border-box;
}
مشاهده و ویرایش کد در حالت تمام صفحه
در مثال بالا، دو عنصر div را با کلاسهای box1. و box2. ساختم. box1. طول و عرضی به اندازه 3em و فونتی به اندازه 16px دارد. box2. طول و عرضی به اندازه 3em و فونتی به اندازه 32px دارد.
همانطور که مشاهده می‌کنید، دو مربع در اندازه‌های متفاوت می بینید. اما هر دوی آنها دارای عرض و طول برابر هستند و تنها مقدار font-size در آنها متفاوت است. بنابراین طول و عرض بطور متناسب تغییر اندازه خواهند داد. این مثال نشان می‌دهد که em چطور در ارتباط با عنصر خود کار می‌کند.
در مثال دیگر میبینیم که em چطور در نسبت با عنصر والد کار می‌کند.
html
<div class="box1">
<div class="things"></div>
</div>
<div class="box2">
<div class="things"></div>
</div>
css
[class*="box"] {
border: 4px solid #ccc;
margin-bottom: 20px;
width: 3em;
height: 3em;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
font-size: 16px;
}
.box2 {
font-size: 32px;
}
.things {
width: 1em;
height: 1em;
border: 2px solid red;
}
مشاهده و ویرایش کد در حالت تمام صفحه
در مثال بالا میبینیم که دو مربع با کلاسهایbox1. و box2. فونتهایی با اندازه‌های مختلف دارند. مربعbox1. فونتی با اندازه 16px و box2. فونتی با اندازه 32px دارد. اما مربع قرمز داخل این مربع‌ها عرض و ارتفاع مختلف دارد چون اندازه فونت والد آنها متفاوت است. پس em وابسته به عناصر والد خود است.
rem
واحد rem مانند em است اما تفاوت آن در اینست که em از اندازه فونت (font-size) در عنصر خود استفاده می‌کند و به آن وابسته است اما rem از اندازه عنصر root یا ریشه استفاده می‌کند که اندازه پیشفرض فونت 16px است. پس 1rem برابر است با 16px.
html
<h1>rem وابسته به عنصر root است.</h1>
css
html {
font-size: 20px;
direction: rtl;
}
h1 {
font-size: 2rem;
}
مشاهده و ویرایش کد در حالت تمام صفحه
درصد
واحد درصد به اندازه والد خود وابسته است. به این ترتیب که اگر عرض عنصر را برابر با %10 قرار دهیم، این مقدار %10 از اندازه عرض عنصر والد خواهد بود.
html
<div class="parent">
<div class="child"></div>
</div>
css
.parent {
font-size: 32px;
width: 200px;
height: 200px;
border: 4px solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 50%;
height: 50%;
border: 2px solid red;
}
مشاهده و ویرایش کد در حالت تمام صفحه
واحدهای محدوده دید (viewport)
CSS3 واحدهای نسبی دارد که وابسته به محدوده‌ی دیدی (اندازه) که مرورگرها در اختیار کاربر قرار می‌دهد هستند. در دستگاههای مختلف مانند تلفن همراه، تبلت، و مانیتور ما اندازه‌های متفاوتی از محدوده دید داریم که در هریک بر حسب اندازه محدوده دید، مقیاس عناصر مشخص می‌شود.
واحدهای viewport برابر هستند با: vw, vh, vmin, vmax
vw (viewport width)
1vw برابر است با یک صدم عرض پنجره. برای مثال اگر رزولوشن صفحه برابر با 1920 x 1080 باشد، 1vw برابر است با 19.2px. اگرچه مرورگر اندازه view port را برابر با اندازه پنجره مرورگر می‌داند که شامل اسکرول بار هم می‌باشد. عرض view port بزرگر از عرض عنصر HTML در صفحه می‌باشد.
viewport > html > body
بنابراین اگر ما مقدار 100vw به عرض یک عنصر اختصاص دهیم، این عنصر بیرون از HTML و body قرار می‌گیرد. بنابراین اگر قصد داشتیم که عرض یک عنصر را برابر با تمام صفحه قرار بدهیم، بهتر است که از درصد استفاده کنیم.
vh (viewport height)
برای اینکه طول یک عنصر را برابر با طول کل مرورگر قرار دهیم چه کار می‌کنیم؟ ابتدا طول عنصر والد را برابر %100 قرار می‌دهیم، سپس طول عنصر فرزند را برابر با %100 می‌کنیم.
اینحا vh به کمک ما می‌‌آید. ما می‌توانیم در هر عنصری از عناصر وب از این واحد استفاده کنیم بدون اینکه نیازی باشد تا عناصر والد را دستکاری کنیم.
% < vh
vmin
واحد vmin یک صدم viewport طول و عرض است که از میان آنها کوچکتر را انتخاب می کند. برای مثال اگر viewport شما 850px عرض و 650px طول داشته باشد، 1vim برابر با 6.5px خواهد بود.
vmax
واحد vmax یک صدم viewport طول و عرض است که از میان آنها زرگتر انتخاب می‌کند. برای مثال اگر viewport شما 850px عرض و 650px طول داشته باشد، 1vim برابر با 8.5px خواهد بود.
این کلیت بحث واحدهای اندازه در CSS بود که برای شما توضیح دادم. امیدوارم برای شما مفید بوده باشد.
