اندازه گیری در Css چگونه است؟

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

فهرست مطالب
تعریف واحدهای اندازی گیری
واحدهای اندازه گیری مطلق
نحوه استفاده از واحدهای اندازه گیری مطلق
واحدهای اندازه گیری نسبی
نحوه استفاده از واحدهای اندازه گیری نسبی
نکات تکمیلی واحدهای اندازه گیری

در Css برای تعیین اندازه بعضی از ویژگی ها مانند عرض (width)، ارتفاع (height)، فاصله از عنصر خارجی (margin)، فاصله از عنصر داخلی (padding)، اندازه فونت (font-size)، حاشیه (border) و خیلی از موارد دیگر نیاز داریم که مقداری برای این ویژگی ها مشخص کنیم. واحدهای اندازه گیری در Css از دو قسمت به هم پیوسته تشکیل می شوند، قسمت اول عدد و قسمت دوم واحد اندازه گیری، به عنوان مثال 5px یا %20 یا 100vw . واحدهای اندازه گیری در Css به دو دسته واحدهای اندازه گیری مطلق و نسبی تقسیم می شوند که در ادامه با این دو دسته آشنا خواهیم شد.

واحدهای اندازه گیری مطلق

این دسته از واحدهای اندازه گیری یک مقدار ثابت دارند و عددی که همراه واحد اندازه گیری می آید، دقیقا به همان اندازه در صفحه وب فضا اشغال می کند. معولا برای داشتن صفحات پویا و واکنشگرا نسبت به اسکرین‌های مختلف کمتر از واحدهای مطلق استفاده می شود. از واحدهای اندازه گیری مطلق بیشتر برای چاپ های خارجی (چاپ بنر، پرینت و ...) استفاده می شود. چندین نوع واحد اندازه گیری مطلق در زبان Css داریم که در ادامه با آنها آشنا می شویم.

واحد cm: که به معنی سانتیمتر می باشد

واحد mm: که به معنی میلیمتر می باشد

واحد in: که به معنی اینچ می باشد (مقدار هر اینچ با 2.54 سانتیمتر یا 96 پیکسل برابر است)

واحد px: که به معنی پیکسل می باشد(مقدار هر px برابر با 1/96 هر اینچ می باشد)

واحد pt: که به معنی نقاط می باشد(مقدار هر pt برابر با 1/72 هر اینچ می باشد)

واحد pc: که کوتاه شده کلمه picas می باشد(هر pc برابر با 12pt می باشد)

در بین تمام واحدهای اندازه گیری مطلق px بیشترین کاربرد را دارد و در طراحی صفحات اینترنتی استفاده می شود.

نحوه استفاده از واحدهای اندازه گیری مطلق

استفاده از واحد های px و pt رایج تر است و بقیه واحدهای اندازه گیری این دسته در صفحات وب کمتر استفاده می شوند یا اصلا استفاده نمی شوند. جایی که اکثر اوقات از واحد مطلق استفاده می شود ویژگی border یا همان حاشیه می باشد، برای تعیین عرض و ارتفاع بعضی از قسمت های صفحه هم از واحد px می توان استفاده کرد. نحوه استفاده این دستورات به شکل زیر است:

div {
width:500px;
height:300px;
border: 1px solid #fac800;
font-size: 37pt;
}

خروجی کد:

نکته: از تمامی واحدهای اندازه گیری برای تعیین عرض و ارتفاع می توان استفاده کرد، در اینجا رایج بودن استفاده از این واحدها مد نظر می باشد.

معمولا برای تعیین اندازه فونت سایز (font-size) برای کل صفحه یا حداقل برای المان ریشه که معیار اندازه گیری واحد های نسبی em و rem می باشد از pt یا px استفاده می شود. اندازه پیشفرض فونت سایز برای صفحات وب 16px می باشد.

واحدهای اندازه گیری نسبی

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

واحد em: این واحد نسبت به ویژگی font-size عنصر والد سنجیده می شود.به عنوان مثال اگر ویژگی فونت سایز را 10 پیکسل در نظر بگیریم، 2em به معنی اندازه 20px می باشد و 1.5em به معنی 15 پیکسل خواهد بود.

واحد ex: نسبت به ارتفاع کاراکتر x سنجیده می شود.

واحد ch: نسبت به اندازه عرض کاراکتر 0 تعیین می شود.

واحد rem: نسبت به اندازه فونت ریشه (تگ html) مشخص می شود

واحد vw: نسبت به 1 درصد عرض کل صفحه نمایش مشخص می شود، مثلا اگر عرض صفحه نمایش شما 30 سانتیمتر باشد هر 1vw برابر با سه دهم سانتیمتر (0.3cm) می باشد

واحد vh: نسبت به 1 درصد ارتفاع کل صفحه نمایش مشخص می شود

واحد vmin: نسبت به 1 درصد از صفحه نمایش در ابعاد کوچکتر سنجیده می شود، به بیان دیگر بین عرض و ارتفاع صفحه نمایش هرکدام کوچکتر باشد اندازه نسبت به آن سنجیده می شود.

واحد vmax: نسبت به 1 درصد از صفحه نمایش در ابعاد بزرگتر سنجیده می شود، به بیان دیگر بین عرض و ارتفاع صفحه نمایش هرکدام بزرگتر باشد اندازه نسبت به آن سنجیده می شود.

واحد %: اندازه را به صورت درصد مشخص می کند

طبق نظر وبسایت w3schools.com که از سایت های مرجع آموزش برنامه نویسی می باشد، واحدهای اندازه گیری em و rem بیشترین مقیاس پذیری را دارند.

باید به این نکته توجه داشت که اندازه های نسبی در صفحه نمایش های مختلف یا به نسبت عنصر والد یا ویژگی والد ممکن است، متغییر باشند نسبت به تصویر بالا.

نحوه استفاده از واحدهای اندازه گیری نسبی

برای درک بهتر واحدهای اندازه گیری نسبی و ارتباط این واحدها با واحدهای اندازی گیری مطلق مثالی برای شما آماده کرده ام که در زیر به آن می پردازیم. دو واحد اندازه گیری em و rem را با هم مقایسه می کنیم.

در ابتدا دو تگ div با کلاس های item-1 و item-2 ایجاد می نمائیم و برای وسط قرار گرفتن محتوا و نمایش بهتر دو تگ div ، استایل های زیر را به عناصر خود اختصاص می دهیم.

توجه: در کادر زیر فقط استایل هایی که قرار نیست تا انتها تغییری در آنها ایجاد نمائیم، آورده شده است.

body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.item-1 {
height: 200px;
background-color: red;
}
.item-2 {
height: 200px;
background-color: blue;
}

در کدهای بالا مشخص کرده ایم که عرض و ارتفاع محتوا به اندازه تمام عرض و تمام ارتفاع دستگاه استفاده کننده باشد.

در مرحله اول اندازه یکسان به دو تگ div ایجاد شده خودمان می دهیم.

.item-1 { width: 10em}
.item-2 { width: 10rem}

از آنجایی که این دو واحد اندازه گیری به اندازه font-size وابسته هستند و مقدار پیشفرض فونت سایز 16px می باشد، هر دو عنصر ما عرض 160px خواهند داشت.

در مرحله بعدی مقدار ویژگی فونت سایز برای body را به 32px تغییر می دهیم.

body { font-size: 32px; }

همان طور که در تصویر مشاهده می کنید عنصری بالایی که دارای عرض 10em می باشد دو برابر عنصر پایینی می باشد که مقدار عرض آن 10rem می باشد. با تغییر اندازه فونت سایز body عرض عنصر بالایی که دارای واحد em می باشد دو برابر شد اما عنصر پایینی که دارای عرض 10rem می باشد بدون تغییر باقی ماند، زیرا واحد rem وابسته به اندازه فونت سایت تگ html می باشد و فقط در صورت تغییر فونت سایز برای این تگ مقدار آن تغییر می کند.

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

.item-1 { font-size: 32px; }

حال اگر فونت سایز body را به حالت اولیه برگردانیم و فونت سایز تگ html را به 32px تغییر دهیم، عرض هر دوعنصر دو برابر خواهد شد و البته تمامی عناصر صفحه دارای اندازه فونت دو برابر می شوند.مانند شکل زیر.

html { font-size: 32px; }

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

نکات تکمیلی واحدهای اندازه گیری

بین عدد و واحد نباید فاصله وجود داشته باشد.

اگر مقدار یکی ویژگی صفر باشد نیازی نیست واحد برای آن مشخص کنیم

اندازه های منفی به صورت کلی تعریف نشده هستند اما برخی از ویژگی های Css اندازه منفی را نیز قبول می کنند. مانند ویژگی های top و left و right و bottom .

امیدوارم این مطلب براتون مفید بوده باشه.