تا الان که به آموزش css3 پرداخته ایم و نیز در مبحث قبلی هم قواعد دستوری را مطرح کردیم، در ادامه آن بیان کردیم که می خواهیم بررسی واحدهای اندازه گیری در سی.اس.اس ۳ بپردازیم.

واحدهای اندازه گیری در سی.اس.اس ۳ :

واحد های اندازه گیری عبارت است از همان واحد هایی که بیشتر در صفحات وب استفاده می شود. مرورگر ها به طور پیش فرض برای تمامی فونت ها یک اندازه دارد تا در صورت تعیین نکردن اندازه به متن، متن قابل نمایش باشد. در طراحی وب و یا طراحی سایت واحد های مختلف استفاده می گردد اما واحد استاندارد آن% ,px,em می باشند.

Pixel : پیکسل واحد اندازه گیری معمول در طراحی وب یا طراحی سایت است که اکثر کدنویسان از این واحد اندازه گیری استفاده می کنند.

Percentage : واحد درصدی است که در طراحی واکنش گرا استفاده می شود.

EM : واحدی است که اندازه آن به اندازه ی فونت پدر تگ جاری بستگی دارد. به عنوان مثال اگر اندازه ی فونت یک تگ برابر با ۱۰ پیکسل باشد و اندازه فونت تگی که درون این تگ قرار دارد به اندازه ی em2 تعیین شده باشد، اندازه ی فونت تگ فرزند دو برابر تگ پدر می شود، یعنی ۲۰ پیکسل.

Rem : مشکلی که واحد em دارد اینست که سایزش نسبت به عنصر والد تعیین می شود و ممکن است دچار مشکل شوید، برای حل این مشکل می توانید در کنار em از rem هم استفاده کنید.

واحد rem هم مثل em عمل می کند با این تفاوت که سایز فونت نسبت به سایز تعیین شده برای عنصر root مشخص می شود (مثل body ، html ).

نکته : این واحد ها تنها در فونت محدود نمی شود بلکه شما می توانید آن را برای خاصیت های دیگری چون Margin,padding,width,heigh امثال این ها در css استفاده نمایید.

واحدهای اندازه گیری در وب با واحدهای اندازه گیری در چاپ متفاوت است، در این جدول زیر واحدهای مناسب برای هر محیط توضیح داده شده :

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

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