جلسه هفتم : ادامه واحدهای نسبی(relative units)
هنگامی که یک سند html را در مرورگر باز می کنید نمایی از آن در حافظه خود ایجاد می کند که در آن همه عناصر صفحه وجود دارند. این نما DOM نام دارد . این یک ساختار درختی است که هر عضو آن مانند یه گره در گراف نمایش داده می شود. عنصر html در بالاترین سطح سپس در زیر آن head و بعد از آن body و سایر فرزندان قرار میگیرند.گره html، پدر همه عناصر موجود در سند است.
Rem
در مقاله قبلی در مورد emها صحبت کردیم.Rem مخفف root em می باشد. برخلاف واحدهای نسبی مثل em که به اندازه قلم وابسته است این واحد به عنصر پدر وابسته است و مهم نیست که در کجای صفحه از آن ها استفاده می کنید.در هنگام محاسبه اندازه بر اساس مقدار ریشه عمل خواهد شد.در ابتدا اندازه قلم ریشه محاسبه شده و سپس از روی آن اندازه قلم عنصر فعلی محاسبه خواهد شد.
برخی از مرورگرها برای شخصی سازی اندازه متن دو روش را برای کاربر فراهم می کنند. بزرگنمایی و کوچک نمایی اندازه قلم به کمک فشار دادن کلید های ctrl + plus و ctrl + minus. این کلیدهای میانبر همه عناصر موجود در صفحه را مقیاس بندی کرده و همه را به طور کلی بزرگ و یا کوچک می کند. در بعضی از مرورگرها فقط در صفحه ای نمایش داده می شود این تغییرات اعمال می شود و در صورت رفتن به صفحه بعد تغییرات از بین می رود.
توجه! از آن جایی که ممکن است بعضی از کاربران اختلال بینایی داشته باشند تنظیم اندازه قلم ها با واحدهای نسبی ضروری به نظر می رسد.
در اینجا سوالی که پیش می آید این است که آیا شما همواره باید از واحدهای نسبی استفاده کنید و بقیه واحدها را کنار بگذارید؟ در اینجا باز هم جواب css “بستگی دارد” خواهد بود.
Emو rem تنها یکی از ابزارهای موجود در جعبه ابزار شما برای ایجاد صفحات واکنش گرا می باشد. بخش مهمی از تسلط بر Css به یادگیری زمان درست استفاده از این ابزارها بستگی دارد.
در صورتی که شما کدهای خود را منظم و بر اساس واحدهای نسبی بنویسید در صورت تغییر اندازه صفحات کل اجزای صفحه متناسب با اندازه مرورگر بزرگ یا کوچک خواهد شد.در این حالت در صورتی که مشتری از شما بخواهد اندازه قلم را بزرگتر و یا کوچکتر کنید کافیست فقط یک خط از کدهای خود را تغییر دهید.
برای تغییر دادن اندازه یک مولفه شما می توانید از emها استفاده کنید. ممکن است لازم باشد یک عنصر در صفحات مختلف اندازه های مختلفی داشته باشد. برای انجام این کار می توان از panel استفاده کرد. با تغییر کوچکی در کد خود می توانید این مورد را بررسی کنید.
کد زیر را بررسی کنید:
.panel {
font-size: 1rem;
padding: 1em;
border: 1px solid #999;
border-radius: 0.5em;
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
مطابق این کد شما هم چنان از واحدهای نسبی استفاده خواهید کرد اما نسبت آن ها را تنظیم خواهید کرد. در کد ابتدا اندازه قلم تعیین شده است. 1em اندازه والد هر panel را مشخص می کند. اندازه عناصر با توجه به عنصر ریشه موجود در صفحه تعیین می شود و اهمیتی ندارد که عنصر کجای صفحه قرار دارد. در قدم بعدی اندازه قلم را به کمک em تعیین می شود تا اندازه والدی که نوشته شده قابل محاسبه باشد.
این تغییرات تاثیری در ظاهر پنل شما ندارد اما شما را برای ایجاد یک نسخه بزرگتر با یک خط کد آماده می کند.
برای ایجاد نسخه بزرگتر کد زیر را به صفحه خود اضافه کنید.
.panel.large {
font-size: 1.2em;
}اگر برای عنصر کلاس panel را استفاده کنید یک صفحه معمولی و اگر از panelLarge استفاده کنید صفحه بزرگتر خواهید داشت.
پس نتیجه میگیریم که یک پنل حتی اگر دارای مولفه های مختلف و پیچیده باشد برای تغییر اندازه های کلی آن میتوان کمترین هزینه یعنی فقط تغییر یک خط کد را پرداخت به شرطی که همه عناصر با em مقداردهی شده باشند.
Viewport-relative units
تا اینجا یاد گرفتیم که rem و em ها بر اساس اندازه قلم تعریف میشوند اما واحدهای نسبی فقط این ها نیستند.در ادامه در مورد view port ها صحبت خواهیم کرد که برای تعریف طول نسبت به اندازه مرورگرها تعریف می شوند.
توجه ! viewport منطقه ای قاب شده و دارای چهارچوب است که پنجره وب در آن قابل مشاهده است که شامل نوار ابزار، نوار وضعیت و نوار آدرس نمی شود.
اگر بخواهیم توضیح خلاصه ای در این مورد بدهیم موارد زیر مفید خواهد بود:
Vh : یک صدم طول viewport
vw : یک صدم طول viewport
Vmin : یک صدم طول کوچکترین اندازه موجود در صفحه
Vmax : یک صدم طول بزرگترین اندازه موجود در صفحه
به عنوان مثال 50vw برابر است با نصف اندازه viewport و یا 50vmin بستگی به این دارد که کدامیک از طول یا عرض کوچکتر است.
قطعه کد زیر نشان می دهد که ابتدا مربع بزرگ بدون توجه به اندازه مرورگر ایجاد شد.
.square {
width: 90vmin;
height: 90vmin;
background-color: #369;
}توجه ! واحدهای مربوط به viewport برای اکثر مرورگرها ویژگی جدیدی محسوب میشود و گاهی از آن پشتیبانی نمی کنند. بنابراین ممکن است گاهی هنگام استفاده از آن ها نتایج عجیبی به وجود بیاید.
استفاده از vm برای اندازه قلم
یکی از کاربردهای vm که ممکن است در ابتدا به آن توجه نشود اندازه قلم است که حتی ممکن است بسیار کاربردی تر از استفاده از vm برای ارتفاع یا عرض است. تصور کنید اگر اندازه قلم را 2vm روی عنصری اعمال کنید چه اتفاقی می افتد ؟
اگر در یک مانیتور رومیزی با اندازه 1200 پیکسل باشد. این میزان تا 24 پیکسل ارزیابی می شود.در تبلت با عرض 768 حدود 15پیکسل ارزیابی میشود و نکته جالب این است که این عنصر در هر دو اندازه بدون هیچ تغییر ناگهانی کاهش یا افزایش می یابد چراکه اندازه مرورگر نیز به آرامی کم یا زیاد می شود.
ممکن است بعضی از نمایشگرها مثلا صفحه نمایش 24 پیکسل یا آیفون 6 و 7 در نمایش این نوع مقداردهی دچار شود. برای رفع مسئله می توانید از تابع calc استفاده کنید. این تابع را در کد زیر مشاهده می کنید :
:root {
font-size: calc(0.5em + 1vw);
}این تابع از جمع و تفریق و ضرب و تقسیم پشتیبانی می کند.این عملگرها با فضای خالی باید احاطه شوند. بهتر است بعد از هر اپراطور یک فاصله بگذارید. اکنون اگر صفحه خود را باز کنید و مرورگر را به آرامی تغییر دهید مقیاس قلم هم به راحتی تغییر پیدا می کند. 0.5 em در اینجا به عنوان نوعی اندازه حداقل میکند و 1vh یک مقیاس واکنشگرا را اضافه میکند.
اکنون شما بخش بزرگی از عملیات خود را برای طراحی واکنشگرا انجام داده اید.
با ادامه مقالات با ما همراه باشید.
دیدگاهتان را بنویسید