جلسه ششم: واحدهای نسبی(relative units)
هنگام کار با CSS استفاده از واحد اندازه گیری پیکسل بسیار متداول است اما گاهی نیاز داریم تا اندازه عناصر را با متناسب با سایر عناصر مثلا اندازه قلم تعیین کنیم.در این حالت ما به تعدادی واحد نسبی نیاز داریم تا بتوانیم مقادیر مورد نظر خود را به درستی وارد کنیم. یکی از روش هایی که واقعا تاثیر زیادی در بهبود طراحی های CSS دارد استفاده از واحدهای نسبی مانند rem و em می باشد.
اگر در بخشی از کد خود 5 پیکسل را به عنوان اندازه طول یک عنصر انتخاب کرده اید این اندازه همواره ثابت خواهد ماند پس پیکسل به عنوان واحد مطلق شناخته خواهد شد.
توسعه دهندگان CSS حتی افرادی که از تجربه کافی برخوردار هستند نیز معمولا در هنگام کار با واحدهای نسبی دچار مشکل می شوند. از آنجایی که em مقادیر شما را می تواند تغییر دهد ممکن است اندازه ها به صورت غیر منتظره ای تغییر پیدا کند.
در اوایل توسعه برنامه های رایانه ای ، توسعه دهندگان محدودیت هایی داشتند و نسبت به آنها آگاهی داشتند .مثلا اگر عرض یک پنجره خاص ممکن است 400پیکسل در 300 پیکسل باشد ، هنگامیکه توسعه دهنده تصمیم دارد دکمه یا متن را به آن اضافه کند دقیقا میداند که این عناصر را چه اندازه می تواند بسازد و اینکه چه قدر فضا در اختیار دارند اما در وب اینگونه نیست. در محیط وب کاربر می تواند پنجره مرورگر خود را به اندازه دلخواه خود تنظیم کند و اینجاست که باید کدهای CSS با توجه به تغییرات ایجاد شده خود را به روز کند.
علاوه بر این کاربر بعد از باز شدن صفحه خود می تواند اندازه آن را تغییر دهد . این بدین معنی است که هنگام ایجاد صفحه نمی توان استایل ها را مستقیما استفاده کرد بلکه هنگام ارائه باید این موارد را محاسبه کرد.
با پیش رفت فناوری و تولید نمایشگر هایی با وضوح بالا استفاده از پیکسل ها رفته رفته با افول مواجه شد. در ادامه با ظهور گوشی های هوشمند توسعه دهندگان مجبور شدند ایجاد سایت ها با اندازه های ثابت را متوقف کنند و در ادامه مجبور شدند از ایجاد ستون هایی با پیکسل ثابت را کنار بگذارند و به طراحی های responsive روی بیاورند.responsive بودن به این معناست که صفحات طراحی شده و عناصر موجود در آن بر اساس اندازه پنجره مرورگر تغییر سایز بدهند.
این شکل از کدنویسی در CSS نوعی از انتزاع را در پروژه به وجود می آورد که برای محاسبه اندازه بعضی از عناصر نیاز است ابتدا بستر آن اجرا شود و سپس بر اساس آن سایر اندازه ها تعیین می شود.
واحدهای نسبی یکی از ابزارهایی است CSS برای کار در این سطح از انتزاع فراهم می کند . به جای اینکه انداره قلم خود را مثلا 14 پیکسل تنظیم کنید، می توانید آن را متناسب با اندازه پنجره تنظیم کنید یا می توانید اندازه همه ی موارد صفحه را با توجه به اندازه قلم تنظیم کنید و سپس با یک خط کد کل صفحه را تغییر دهید.
CSS چندین واحد مطلق را پشتیبانی می کند که متداول ترین و اصلی ترین آن پیکسل است.از دیگر واحدهای مطلق می توان به میلی متر، سانتی متر ، اینچ ، pt یا نقطه و … اشاره کرد. هر یک از واحدها را می توان مستقیما به واحد دیگر تبدیل کرد مثلا 16 پیکسل همان 12pt است.
توجه ! پیکسل نامی گمراه کننده برای توسعه دهندگان است. چرا که با پیکسل های مانیتور اشتباه گرفته می شود.پس لازم است هنگام تعیین اندازه ها به این مسئله توجه کنید.
ems
متداول ترین واحد نسبی همان واحد اندازه گیری در تایپوگرافی است که اشاره به اندازه قلم دارد. در CSS ، 1em به معنای اندازه عنصر فعلی است . در قطعه کد زیر مشاهده می کنید که اندازه قلم 16 پیکسل تعریف شده است که برابر با اندازه local تعریف شده برای 1em می باشد. سپس از em برای مشخص کردن اندازه padding استفاده شده است.
.padded
{
font-size: 16px;
padding: 1em;
}به padding مقدار 1em اختصاص داده شده است که در اندازه قلم یعنی 16 پیکسل ضرب می شود و اندازه padding محاسبه می شود. در اینجا مقدار نسبی توسط مرورگر به یک مقدار مطلق تبدیل می شود که به این عدد مقدار محاسبه شده (computed value) گفته می شود.از جمله مواردی که ems بسیار مفید می شوند هنگامی است که اندازه قلم و فاصله و سایز یک دکمه و متن آن یا این نسبت تعیین می شوند در این حالت هنگامیکه اندازه دکمه تغییر کند متن و فاصله متناسب با آن تغییر پیدا می کند.اکنون استایل های زیر را به کد خود اضافه کنید. این کد یک جعبه که با واحد em مقداردهی شده است را تعریف می کند. هم چنین تعدادی انتخابگر را نیز که هر کدام اندازه متفاوتی را مشخص می کند نیز اضافه شده است.
<head>
<style>
body
{
margin: 1.5em;
}
.box {
padding: 1em;
border-radius: 1em;
background-color: lightgray;
}
.box-small
{
font-size: 12px;
}
.box-large
{
font-size: 18px;
}
</style>
</head>
<body>
<span class="box box-small">Small</span>
<span class="box box-large">Large</span>
</body>از جمله ویژگی هایی که باعث می شود em قدرتمند شود این است که می توانید اندازه ها و نسبت عناصر را مشخص کنید و سپس با یک قطعه کد کل این عناصر را تغییر دهید.
استفاده از em برای تعریف اندازه قلم
وقتی صحبت از ویژگی font-size میشود کمی رفتارها متفاوت تر می شود. em با اندازه قلم عنصر تعیین می شود اما اگر اندازه قلم را 1.2emتعریف کنید این به چه معناست؟ اندازه قلم نمیتواند 1.2 باشد اما اگر با em تعریف شده باشد از روی والد خود می توان اندازه را حساب کرد.برای مثال صفحه ی خود را مطابق کد زیر تغییر دهید:
body {
font-size: 16px;
}
.slogan {
font-size: 1.2em;
}
سطر اول کد و tag اندازه فونت بدنه را تعیین می کند بخش دوم یعنی slogan اندازه فونت را ارث می برد.
درcss بعدی اندازه قلم بدنه را تعیین می کند سپس با استفاده از em اندازه slogan را افزایش دهید.اندازه عنصر 1.2 تعیین شده است. برای محاسبه آن بر اساس پیکسل شما نیاز دارید بدانید که چه مقداری را به عنوان فونت ارث می برد که در اینجا 16px می باشد. 16*1.2=19.2 .پس اندازه فونت 19.2 اعمال خواهد شد.
توجه! اگر می خواهید براساس پیکسل اندازه بدانید ولی بر اساس em اندازه ها را تعیین کنید یک فرمول ساده دارد: اندازه موردنظر خود را تقسیم بر مقدار به ارث برده شده کنید.
مثلا اگر شما میخواهید که فونت 10پیکسل باشد و مقدار ارث برده شده آن 12 پیکسل است 12/10=1.2
از نظر فنی برای شما مفید است که بدانید اکثر مرورگرها اندازه قلم پیش فرض را 16 پیکسل در نظر میگیرند.
در هنگام استفاده از em ها بسیار دقت داشته باشید که این عنصر مقدار خود را از کجا به ارث می برد در غیر اینصورت ممکن است نتایج غیر منتظره ای بدست بیاورید.
این مبحث ادامه دارد.با ما همراه باشید.
دیدگاهتان را بنویسید