واحدهای اندازه گیری در CSS
در CSS، واحدهای اندازهگیری مختلفی برای تعیین ابعاد، موقعیت و سایر ویژگیهای عناصر HTML وجود دارد. هر واحد اندازهگیری مزایا و معایب خاص خود را دارد و انتخاب واحد مناسب برای هر موقعیت به عوامل مختلفی مانند نیازهای طراحی، سازگاری مرورگر و وضوح صفحه نمایش بستگی دارد.
دستهبندی واحدها
واحدهای اندازهگیری CSS را میتوان به دو دسته کلی تقسیم کرد
- واحدهای مطلق : اندازه ثابتی دارند و در همه دستگاهها و مرورگرها یکسان نمایش داده میشوند.
- واحدهای نسبی : اندازه آنها به عوامل مختلفی مانند اندازه فونت، اندازه صفحه نمایش یا اندازه والد آنها بستگی دارد.
انواع واحدهای اندازهگیری
واحدهای مطلق
- پیکسل (px) : واحد رایج برای اندازهگیری ابعاد عناصر، مانند عرض، ارتفاع، حاشیه و لبهها.
- اینچ (in) : معادل 2.54 سانتیمتر، برای ابعاد بزرگتر مانند عرض صفحه نمایش.
- سانتیمتر (cm) : واحد اندازهگیری متریک، برای ابعاد چاپی یا طراحی گرافیکی.
- میلیمتر (mm) : یک دهم سانتیمتر، برای جزئیات دقیقتر.
- پوینت (pt) : 1/72 اینچ، معمولاً برای اندازه فونت استفاده میشود.
- پیکا (pc) : 1/6 اینچ، معمولاً برای اندازه فونت استفاده میشود.
واحدهای نسبی
- درصد (%): اندازهای را به عنوان درصدی از عنصر والد یا ریشه (viewport) تعیین میکند.
- em: اندازهای را به عنوان ضریبی از اندازه فونت والد تعیین میکند.
- rem: اندازهای را به عنوان ضریبی از اندازه فونت ریشه (viewport) تعیین میکند.
- vw: اندازهای را به عنوان درصدی از عرض viewport تعیین میکند.
- vh: اندازهای را به عنوان درصدی از ارتفاع viewport تعیین میکند.
- ex: ارتفاع خط فعلی متن را به عنوان واحد اندازه گیری در نظر میگیرد.
- ch: عرض حروف بزرگ (capital letters) را به عنوان واحد اندازه گیری در نظر میگیرد.
واحدهای اندازه گیری اختصاصی هم در CSS وجود دارند که با هر کدام از آنها در جایگاه خود باید آشنا شوید.