چطور بهترین واحد CSS (CSS Unit)را برای طرح بندی خود انتخاب کنیم

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

اما هنگامی که صحبت از واحدهای CSS می شود، گزینه های زیادی برای انتخاب وجود دارند و همه گزینه ها برابر نیستند. واحدهای CSS فقط به فونت ها محدود نمی شوند، بنابراین به عنوان یک توسعه دهنده فرانت اند، باید بدانید که چگونه این واحدها بر طرح بندی ها تأثیر می گذارند.

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

انواع واحدهای CSS

واحدهای CSS را می توان در 3 دسته بندی، طبقه بندی کرد:

• واحدهای مطلق (Absolute units)
• واحدهای نسبی فونت (Font relative units)
• واحدهای نسبی Viewport (Viewport relative units)

واحدهای مطلق (absolute units)

برخی از واحدها به مقادیر مطلق خاصی بستگی دارند و اندازه صفحه یا فونت بر آنها تأثیر نمی گذارد. نمایش این واحدها ممکن است بسته به وضوح صفحه نمایش متفاوت باشد، زیرا به DPI (نقطه در هر اینچ) صفحه نمایش بستگی دارد.

این واحدها عبارتند از:

• px (پیکسل)
• in(اینچ)
• cm (سانتی متر)
• mm (میلی متر)
• pc (پیکاس)
• pt (پوینت)

پیکسل (px)

پیکسل ها رایج ترین واحد مورد استفاده و پذیرفته شده هستند. و پایه اندازه گیری بسیاری از واحدهای دیگر در نظر گرفته می شود. همچنین پیکسل ها سازگارترین نتیجه را در بین دستگاه های مختلف ارائه می دهد و در تمام اندازه های صفحه نمایش ثابت می ماند. تمام واحدهای مطلق دیگر مانند in (اینچ)، cm (سانتی متر) و mm (میلی متر) واحدهای اندازه گیری دنیای واقعی با موارد استفاده بسیار کمی از CSS در دنیای واقعی هستند.

با این حال، درک رابطه آنها با پیکسل ها هنوز خوب است، بنابراین مقایسه آنها به این صورت است:

1 اینچ = 96 پیکسل

1 سانتی متر = 37.8 پیکسل

1 میلی متر = 3.78 پیکسل

در حالی که pc (picas) و pt (نقاط) ارتباط مستقیمی با اینچ دارند.

1 اینچ = 72pt

1 اینچ = 6 pt

رابطه بین تمام واحدهای مطلق را می توان به صورت تصویر زیر نشان داد:

واحدهای نسبی فونت (Font relative units)

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

• em
• rem
• ex
• ch
• Em

ام (Em)

یک واحد طول نسبی است که وابسته به اندازه فونت عنصر والد یا سند دارد. به طور پیش فرض،در صورتی که اندازه فونت تعریف نشده باشد، 1em برابر با 16 پیکسل است.Em اندازه را از اندازه فونت والد بالایی خود به ارث می برد. مثلاً اگر یک عنصر والد دارای اندازه قلم: 18 پیکسل باشد، 1em برای همه فرزندش 18 پیکسل اندازه‌گیری می‌شود.در نتیجه، عناصر فرزند مقادیرشان را از والد به ارث می برند. مزیت استفاده از em این است که اگر تصمیم دارید اندازه قلم، بالشتک و حاشیه هر عنصر را به تناسب تغییر دهید، فقط باید اندازه فونت عنصر والد را تغییر دهید و همه عناصر دیگر مطابق با آن تنظیم می شوند.این در مورد واحدهای مطلق مانند px صدق نمی کند.

رم (rem)

Rem برخلاف em، به اندازه فونت عنصر ریشه اشاره می کنند، نه عنصر والد.

اکس (Ex)

Ex نسبت به x-height فونت فعلی است و به ندرت از آن استفاده می شود. اندازه گیری قد x سازگار نیست. گاهی از خود فونت می آید و گاهی مرورگر خودش محاسبه می کند.مانند em و rem، به فونت بستگی دارد، اما تفاوت عمده این است که ex با تغییر خانواده فونت نیز تغییر می کند، که در مورد دو مورد دیگر صدق نمی کند.

سی اچ (ch)

Ch شبیه ex است اما به x-height بستگی ندارد. بلکه به عرض کاراکتر صفر (0) بستگی دارد و با font-family تغییر می کند.

واحدهای نسبی Viewport

چند واحد وجود دارند که به ارتفاع و اندازه درگاه دید یا همان view port ما بستگی دارد، مانند:

• vh (viewport height)
• vw (viewport width)
• vmin (viewport min)
• vmax (viewport max)

ارتفاع درگاه دید یا ارتفاع ویوپورت (vh)

Vh (ارتفاع درگاه دید) برابر با 1 درصد از ارتفاع درگاه دید است. این واحد برای ایجاد عناصر تمام ارتفاع بسیار مفید است. Vh به طور مشابه به درصد واکنش نشان می دهد، اما به ارتفاع عنصر والد بستگی ندارد. شما می توانید از vh در هر جایی استفاده کنید، اما رایج ترین مورد استفاده از vh برای ساخت عناصر با ارتفاع کامل است.

عرض درگاه دید یا عرض ویوپورت (vw)

Vw (عرض دید) شبیه به vh است اما به جای ارتفاع درگاه دید، عرض را در نظر می گیرد. 1vw برابر با 1% از عرض دید است. اگر می خواهید یک نمای واکنشگرا بر اساس تایپوگرافی ایجاد کنید، این واحدها می توانند واقعا مفید باشند.

مینیمم عرض یا ارتفاع درگاه دید یا ویوپورت (Vmin)

Vmin بر اساس حداقل مقدار عرض یا ارتفاع ویوپورت محاسبه می شود، هر کدام کوچکتر باشد. فرض کنید که اندازه نمایی با ارتفاع 1000 پیکسل در عرض 800 پیکسل دارید. 1vmin برابر با 8px خواهد بود.

ماکزیمم عرض یا ارتفاع درگاه دید یا ویوپورت (Vmin)

Vmax دقیقاً برعکس vmin محاسبه می‌شود، جایی که حداکثر مقدار viewport در نظر گرفته می‌شود.

واحد درصد (%)

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

درصد یکی از مفیدترین واحدها برای ایجاد یک چیدمان پاسخگو یا روان است. فریمورک های محبوبی مانند Bootstrap ، foundation و Bulma از درصد برای چیدمان پایه خود استفاده می کنند.

در این مقاله سعی کردم تقریباً تمام واحدهای CSS موجود برای استفاده را برای شما پوشش دهم اما مهم است که در نظر داشته باشید که بسته به اهداف شما، برخی از آنها بهتر از سایرین مناسب خواهند بود.

«به عنوان یک توسعه‌دهنده فرانت‌اند، همیشه خوب است که گزینه‌های خود را بدانید زیرا هرگز نمی‌دانید که ممکن است در پروژه بعدی خود به کدام یک نیاز داشته باشید. ”

امیدوارم این واحدها را به خوبی یاد گرفته باشید و بتوانید بهترین و درست ترین پروژه ها را با آنها پیاده سازی کنید.