یادگیری واحدهای اندازه گیری در css از جمله مهمترین نکات برای پیاده سازی یک صفحه است. شما باید بتوانید اندازه یک عنصر را با توجه به اهمیتش در یک صفحه تعیین کنید. برای انتخاب اندازه المان ها در یک صفحه، گزینه های بسیار زیادی وجود دارند که هر یک از آن ها نسبت به دیگری متفاوت است. با درک کاربردی که هر یک از واحدهای اندازه گیری دارند؛ میتوانید در زمان مناسب از ویژگی های آن ها بهره ببرید.
واحدهای اندازه گیری در css به دو دسته "absolute" و "relative" تقسیم میشوند.
واحدهای مربوط به این دسته از ابعاد نمایشگر یا پدر(تگی که درون آن قرار گرفته اند.) پیروی نمیکنند. مهم نیست اندازه نمایشگر یا پدر چقدر باشد، پارامترهایی که دارای واحد اندازه گیری مستقل(absolute) هستند در هر اندازه ای از آن ها به صورت یکسان نمایش داده میشوند. واحدهای اندازه گیری مستقل عبارتند از:
آن ها برعکس واحدهای اندازه گیری مستقل(absolute) به اندازه صفحه نمایشگر یا پدرشان وابسته هستند. هرگونه تغییر در اندازه نمایشگر یا تگ پدر میتواند موجب تحولی در اندازه پارامترهایی با واحد اندازه گیری وابسته(relative) شود. همین موضوع باعث شده است تا واحدهای موجود در این دسته به انتخاب بهتری برای طراحی واکنش گرا(responsive design) تبدیل شوند. این واحدها عبارتند از:
درصد (%)
یک پارامتر با طول 25% اجازه دارد تا 1/4 از صفحه ی نمایشگر(در صورت نبود تگ پدر) و یا تگ پدر(در صورت وجود) را اشغال کند.
عرض و ارتفاع صفحه نمایش (vh & vw)
نام این واحدها از دو کلمه view height (ارتفاع صفحه نمایشگر) و view weight (عرض صفحه نمایشگر) به دست آمده است. اندازه پارامترهایی که از این واحد برخوردار هستند متناسب با عرض صفحه و ارتفاع صفحه تغییر میکند.
واحد (em)
این گروه از واحدها به اندازه فونت(font-size) تگ پدر وابسته هستند. اگر در فرزند یک تگ با font-size: 20px از پارامتری با اندازه 2em استفاده شود، آن آیتم به اندازه 40px دیده خواهد شد.
واحد (rem)
این واحد به اندازه فونت(font-size) در پدر همه ی تگ ها یعنی html (که در css با * انتخاب می شود.) بستگی دارد. از این جهت است که اسم آن ها از root em گرفته شده که به معنی ریشه است.
