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

خوب این هم یه مقاله برای رفع سردرگمی همه درباره ی واحد های اندازه گیری .

• اصلا واحد های اندازه گیری برای چی اند که اینقد برای ما مشکل بوجود آوردند ؟
• واحد ها به چند دسته تقسیم میشن ؟
• اصلا تک تک واحد ها چجوری کار میکنن ؟

اینها سوالاتی هستند که ما در این مقاله به آنها جواب میدهیم.

- اصلا واحد های اندازه گیری برای چی اند که اینقد برای ما مشکل بوجود آوردند ؟

زمانی که میخواهیم اندازه یک div یا اندازه فونت ها را مشخص کنیم از واحد های اندازه گیری بهره میبریم چون برای هر div یا فونت ما به یک اندازه بسنده نمیکنیم و باید اندازه آنها را متفاوت طراحی بکنیم تا به افزایش بهره وری در صفحات سایت برسیم .

-واحد ها به چند دسته تقسیم میشن ؟

واحد ها در css به دو دسته تقسیم میشوند :

1- واحد های Absolute ( مطلق ) :
همیشه ثابت اند و با تغییر اندازه صفحه مرورگر نیز ثابت میمانند

2- واحد های Relative ( نسبی ) :
نسبت به المانی در صفحه متغیر اند و اکثرا با تغییر اندازه ی صفحه مرورگر تغییر میکنند .

-اصلا تک تک واحد ها چجوری کار میکنن ؟

خب طرز کار واحد های absolute که مشخصه اینها چون همیشه ثابت هستند پس فقط ما باید واحدی که میخواهیم بر اساس اون اندازه ها را مشخص کنیم انتخاب کنیم و برای ابزارمون اندازه مشخص کنیم .

واحد های absolute :

طبق عکس بالا واحد های px , in , cm , mm , pt , pc جزو واحد های absolute هستند و در این واحد ها اندازه ها با یک میزان واحد مقایسه میشوند و با تغییر عرض ثابت اند .

واحد pixels (px) :
96 پیکسل = 1 اینچ

واحد inches (in) :
1 اینچ = 2.56 سانتی متر

واحد centimeter (cm) :
1متر = 100سانتی متر

واحد millimeter (mm) :
1سانتی متر = 10 میلی متر

واحد points (pt) :
1 اینچ = 72 پوین

واحد picas (pc) :
1پیکاس = 12 پوینت

نکته : از واحد های مطلق در طراحی صفحه نباید استفاده شود یا اگر استفاده میشود باید به حداقل برسند زیرا برای هماهنگ شدن در دستگاه های مختلف با رزولوشن های مختلف به مشکل خواهیم خورد.

واحد های Relative :

واحد های % , em ,rem, ex ,ch ,vw, vh , vmax , vmin نسبی یا relative هستند و نسبت به متغیری در صفحه تغییر میکنند

واحد درصد (%) :

فرض کنید برای عرض یک div کد زیر را بنویسیم

width : 70 % ;

در این صورت عرض div ما در هرصورت 70 درصد میماند حتی اگر با موس عرض مرورگر را کم و زیاد کنیم این div فقط 70% عرض موجود عنصر پدر خودش را استفاده میکند

نکته:هرگز بین عدد و واحد اندازه گیری فاصله نندازید زیرا باعث خطای سینتکسی میشود و به جای نوشتن 20 px بنویسید 20px .

واحد های em , rem (font-size) :

این واحد ها تغییرات خودشون رو برحسب font-size یکی از اعضای والدشون انتخاب میکنند که در
rem تگ ریشه یعنی تگ html انتخاب میشود
و در em نزدیکترین تگ پدر انتخاب میشود و مانند زیر استفاده میشوند

div{
 font-size: 10px ;
}
div span{
width: 2em;  /* 1em = 10 px  =>  2em = 20px */
}

پس در این فرم اگر تگ span داخل div باشد عرض آن 20px میشود

نکته : برای طراحی وبسایت های ریسپانسیو بهترین واحد های اندازه گیری em , rem هستند

واحد viewport Height (vh) , viewport Width (vw) :

به مقدار قابل مشاهده روی صفحه ی پنجره viewport میگویند

در این واحد ما اندازه ها را برحسب viewport محاسبه میکنیم و اینگونه از آنها استفاده میکنیم.

div{
width: 60 vw;
}

در کد بالا ما یک div با عرض 60% از عرض viewport را اندازه دهی میکنیم و در واقع اگر عرض viewport کم شود عرض کد ما هم با آن کم میشود

نکته : واحد های em , px , rem پر استفاده ترین واحد های اندازه گیری هستند .

واحد های vmin , vmax (viewport min/max):

اینها نیز مانند vw , vh هستند و نسبت به viewport تعیین میشوند ولی vmin میشود درصدی از کوچکترین بعد(عرض یا ارتفاع ) و vmax نیز درصدی از بیشترین بعد در viewport است .
به عنوان مثال عرض viewport برابر با 1000px و ارتفاع viewport برابر با 3000px میباشد پس 5vmin برابر است با 5% از کمترین بعد viewport که در اینجا میشود 5درصد از 1000px که میشود50px و 5vmax نیز میشود 150px

نکته : واحدهای vw ، vh ، vmin و vmax در طراحی سایت های مقیاس پذیر یا واکنشگرا موثر خواهد بود.

واحد های ch , ex :

واحدهای ex و ch همانند دو واحد em و rem به فونت و اندازهٔ فونت سایت وابسته‌اند اما بر خلاف em و rem، این دو همچنین به font-family نیز وابسته‌اند چرا که اندازه‌های آن‌ها برای هر فونت خاصی متفاوت خواهد بود (واحد اندازه‌گیری ch برگرفته از کلمهٔ Character است.)

به بیانی ساده‌تر، اگر از فونت‌های مُونواِسپیس استفاده کنید و کد width: 40ch را به باکس یا اِلِمنت خود بدهید، آن اِلِمنت تنها می‌تواند 40 کاراکتر از آن فونت به خصوص را درون خود جای دهد (Monospace به فونت‌هایی گفته می‌شود که همگی حروف آن دارای عرض یکسان هستند.) همچنین x-height یک فونت برابر با ارتفاع حرف کوچک x در آن فونت است که در بسیاری از اوقات به اندازهٔ محور مرکزی فونت خواهد بود.

کاربردهای بی‌شماری برای این واحد وجود دارد که بیشتر آن‌ها برای تنظیمات و اصلاحات کوچک تایپوگرافی سایت است. برای نمونه، می‌توانید توان‌ها و عباراتی که باید کمی بالاتر از خط اصلی نوشته شوند را به کمک position: relative و bottom: 1ex به راحتی جایگذاری کنید و به همین ترتیب می‌توان عبارات پایین خطی را با به کار بردن کد bottom: -1ex به راحتی طراحی نمود که بدین ترتیب کنترل شما بر روی فونت بسیار بیشتر از گذشته خواهد بود و می‌توانید در هر زمان، قسمت‌های مختلف را به راحتی ادیت و اصلاح کنید.

به صورت کلی اگه ما توانایی هایه ابزار موجود در css را بشناسیم میتوانیم بهترین بهره وری از آن را داشته باشیم پس بهتره همین الان این موارد رو یاد بگیریم تا در آینده به مشکلی نخوریم

ارشیا مخلص