72 Views
2018 Apr 05Trainingtechnology
img

سلام خدمت دوستان و همراهان همیشگی ای دانش ،با سری آموزش های CSS همراه شما عزیزان هستیم.در این جلسه قصد داریم به مبحث واحدهای اندازه گیری در CSS بپردازیم.


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

خب دوستان در دنیای طراحی وب واحدهای زیادی وجود دارد که هرکدام در مکان و موقعیتی کاربرد بیشتری دارند.من این واحدهارا به دو دسته تقسیم می کنم که البته یک تقسیم بندی استاندارد نیست اما برای طراحان وب کاربرد بسیار زیادی دارد.واحدها را می توان بنا به وابسته بودن یا نبودن به دو دسته تقسیم کرد:

1- واحدهایی که به هیچ تگ والدی (پدر) وابسته نیستند.مانند:px - pt - % 

2- واحدهایی که به تگ والد(پدر) وابسته هستند.مانند: em - rem


البته واحدهای دیگری نیز وجود دارد که به دلیل استفاده کم یا پشتیبانی نکردن تمامی مرورگر ها از ذکر کردن آن ها خودداری می کنیم.اما اینکه گفتیم بعضی واحدها به تگ والد خود وابستگی دارند به چه معناست؟


em : واحدی است که اندازه آن به اندازه ی  تگ والد آن بستگی دارد . به عنوان مثال اگر اندازه ی فونت یک تگ برابر با ۱۰ پیکسل باشد و اندازه فونت تگی که درون این تگ قرار دارد به اندازه ی ۲em تعیین شده باشد ، اندازه ی فونت تگ فرزند دو برابر تگ والد یعنی ۲۰ پیکسل  می شود.


rem : مشکلی که واحد em دارد این است که اندازه آن نسبت به عنصر والد تعیین می شود و ممکن است طراح را دچار مشکل کند. برای حل این مشکل می توانید در کنار em از rem هم استفاده کنید . واحد rem هم مثل em عمل می کند با این تفاوت که اندازه آن نسبت به اندازه تعیین شده برای عنصر root مشخص می شود. (مانند html , body) .


نکته:از دو واحد em و rem بیشتر در طراحی های واکنشگرا و ریسپانسیو کردن صفحات وب استفاده می شود.

در جدول زیر می توانید واحدهای اندازه گیری را ببینید:


%درصد که بیشتر برای عرض و ارتفاع و طول استفاده می شود.
ptبیشتر برای اندازه فونت کاربرد دارد .البته چندان پیشنهاد نمی شود.
pxمی توان برای اندازه فونت ، طول و عرض و ارتفاع از آن استفاده کرد.(رایج ترین)
emبه عنصر والد وابسته است.مثال:۲em یعنی دو برابر اندازه به ارث برده شده از تگ والد.(برای طراحی واکنشگرا)
remبه عنصر root وابسته است.برای طراحی واکنشگرا.

نکته : بین مقدار و واحد در کدنویسی نباید فاصله وجود داشته باشد.

در انتها نیز می توانید پشتیبانی مرورگرهای مختلف از واحدهای اندازه گیری را مشاهده کنید.

خب دوستان امیدوارم این آموزش هم مورد استفاده قرار بگیرد.اگر سوالی در رابطه با مبحث آموزشی داشتید حتما در قسمت نظرات آن را مطرح کنید.

آموزش css

css

طراحی وب

آموزش طراحی وب