آموزش واحدهای تنظیم اندازه در CSS

• جزئیات
• نوع مطلبآموزشی

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به بررسی و معرفی واحدهای تنظیم اندازه در css بپردازیم. css دارای چندین واحد برای مشخص کرده اندازه طول و عرض عناصر مختلف html است. هر کدام از واحد ها، کاربرد مشخصی دارند و باید درجای خود مورد استفاده قرار بگیرند.

بسیاری از واحدهای css در خصوصیت طول (length) مورد استفاده قرار می گیرد. مانند : width, margin, padding, font-size, border-width ، خصوصیت length یک عدد است که با یک واحد طول مانند ۱۰px, 2em و … بیان می شود.

در آموزشهای قبلی در حوزه ی css ، مباحث آموزشی  ایجاد نوار منو navigation در css ، ایجاد گالری تصاویر در css و … مورد بررسی و آموزش قرار گرفت. همچنین برای مدیریت و نظم بین عناصر html آموزش های کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css را نیز ارائه کردیم.

در ادامه این پست آموزشی نیز به بررسی موضوع معرفی واحدهای تنظیم اندازه در css می پردازیم.

units -بررسی کاربرد انواع واحد های تنظیم اندازه عناصر در css

معرفی واحدهای تنظیم اندازه در css

دو نوع واحد تعیین اندازه کلی برای مشخص کردن خصوصیت length عناصر وجو دارد:

• absolute
• relative

نوع absolute

واحد های نوع absolute ثابت هستند و هر اندازه ای که در این نوع تعیین می شود در همان اندازه ظاهر شده و تغییر نمی کند. واحد های نوع absolute برای استفاده روی صفحه screen توصیه نمی شود. چراکه اندازه های صفحه نمایش ها بسیار با هم متفاوت است. با این حال می تواند در صورت استفاده از دستگاههای خروجی مانند چاپگر، از آنها در css صفحات وب استفاده کرد

این واحد ها به شرح زیر می باشد:

• cm (سانتی متر).
• mm (میلی متر).
• in (اینچ – ۱ in برابر با ۲٫۵۴ سانتی متر است).
• px (پیکسل – هر ۹۶ px برابر با یک اینچ (in) است).
• pt (پوینت – هر pt برابر با ۱/۷۲ اینچ است ).
• pc (پیکاس هر pc برابر با ۱۲ pt است).

نوع Relative

واحدهای نوع Relative ، بصورت نسبی است و بر اساس اندازه ی واحدهای دیگر مشخص می شوند. این نوع نسبت به نوع قبلی بهتر رندر می شود.

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

• em : برای تعیین اندازه ی نسبی font-size کاربرد دارد(۲em به معنای دو برابر اندازه فونت فعلی است).
• ex : تعیین اندازه به نسبت ارتفاع اندازه فونت جاری.
• ch : تعیین اندازه نسبی برای خصوصیت width از مقدار ۰٫
• rem : تعیین اندازه نسبی font-size،  به نسبت اندازه عنصر html والد.

• vw: تعیین اندازه به نسبت ۱ درصد از عرض viewport.
• vh : تعیین اندازه به نسبت ۱ درصد از ارتفاع  viewport.
• vmin :تعیین اندازه به نسبت ۱ درصد ابعاد کوچکتر viewport.
• vmax :تعیین اندازه به نسبت ۱ درصد ابعاد بزرگتر viewport.
• % :تعیین اندازه نسبی عناصر html بر اساس درصد.