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

یکی از مهم ترین وظایف طراح سایت دقت به اندازه المنت ها درون یک وبسایت است چونکه اندازه مناسب هر المنت در ایجاد ارتباط میان سایت و کاربر نقش بسیار مهمی را ایفا میکند که این امر موجب رشد سایت ما خواهد شد .

واحد های اندازه گیری (css units)

برای مقدار دهی به المنت ها روش های مختلفی در css وجود دارد که اصطلاحا به آنها css units گفته میشود . در ادامه به چند مورد از پر کاربرد ترین های آنها میپردازیم .

• px
• %
• em
• rem (root em)
• vh (viewport height)
• vw (viewport width)

قبل از اینکه واحد های بالا رو توضیح بدم باید شما را با دو مفهوم واحد های مطلق (absolute) , واحد های نسبی (relative) آشنا کنم .

همانطور که از اسم اونها پیداست واحد های مطلق (absolute) : واحد هایی هستند که تحت هر شرایطی مقدار اولیه خود را حفظ میکنند و بر اثر تغییر شرایط مقدار اولیه آنها تغییر نخوهد کرد .

برای درک ساده تر این موضوع یک جسم جامد را تصور کنید که از داخل یک لیوان وارد ظرف شده آیا اندازه جسم جامد تغییر میکنه ؟ مسلما نه .

و اما بریم سراغ واحد های نسبی (relative) : واحد های هستند که بر خلاف واحد های مطلق با تغییر محیط مقدار اولیه آنها تغییر پیدا میکنه و مقدار جدیدی پیدا میکنند .

برای توضیح این مطلب هم اینبار یک لیوان آب را در نظر بگیرید که وارد یک ظرفی دیگر میشود آیا شکل اب تغییر میکنه ؟ بله و اندازه ظرف جدید رو میگیره .

خب بهتره که این موضوع رو با چند مثال دیگر هم بررسی کنیم .

فرض کنید که یک صفحه نمایشگر با ابعاد 1366 * 768 داریم و به div اول کلاس div_1 مقدار عرض مطلق 273 px بدیم و به div دیگری مقدار عرض نسبی 20% بدیم .

.div_1{
    width: 273px;
}
.div_2{
    width: 20%;
}

در قدم اول میزان عرض این دو عنصر برابر است اما با کوچک و بزرگ شدن صفحه میبینیم عنصر اول که از واحد مطلق برای مقدار دهی عرض آن استفاده کرده ایم هیچ تغیری نمیکند اما عرض عنصر دوم که از واحد نسبی برای مقدار دهی استفاده شده بر اساس عرض صفحه تغییر میکند.

الان که تفاوت واحد های مطلق و نسبی رو به طور کامل درک کردیم بهتره css unit هارو به این دو دسته تقسیم بندی کنیم .

• واحد های مطلق (px)
• واحد های نسبی (em , rem , vh , vw , %)

حالا سوال اصلی که ایجاد میشه اینه که واحد های نسبی نسبت به چه عاملی واکنش نشون میدن و تغییر میکنن ؟

واحد های (rem , em) نسبت به fontsize تغییر میکنند . یعنی اگه fontsize : 32px باشه 2em , 2rem برابر با 32px خواهند بود .

تفاوت rem , em هم در اینه که :

واحد em نسبت به font-size پدر خودش تغییر میکنه .

واحد rem نسبت به font-size سند html تغییر میکنه .

واحد های vw , vh هم نسبت به اندازه viewport تغییر میکنند .یعنی 1vh برابر اندازه 1 درصد ارتفاع viewport است .